Benim kişisel tercihler için dosya yükleme düğmesi tarzı için çalışıyorum, ama JS olmadan bunu yapmak için gerçekten sağlam herhangi bir yol bulamadım. Bu konu hakkındatwo other soruları buldum ama cevapları yok JavaScript de dahil, veya Quirksmode's approach önerdi.

Bu Quirksmode yaklaşımı ile benim büyük sorun, dosya düğmesi hala tarayıcı tarafından tanımlanmış boyutlara sahip olacak, altına yerleştirilen bu düğme otomatik olarak kullanılan ne olursa olsun, onu ayarlamak istemiyorum. Ben birkaç tane yaptım kod, esas olarak, sadece ele alan dosya düğmesini normalde, bu kadar olmaz doldurma üst div gibi istiyorum bunu.

HTML:

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>

CSS:

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}

This fiddle bu yaklaşım oldukça hatalı olduğu gösterilmiştir. Krom, klik !! aşağıda ikinci demo düğmesi açık dosya iletişim kutusu yine de, aynı zamanda tüm diğer tarayıcılar, dosya düğmesi yok yukarı doğru alanların düğmesi.

Yok artık katı şekilde stil dosya yükleme düğmesi olmadan herhangi bir JavaScript ve tercihen kullanarak küçük 'hacky' kodlama olarak mümkün (beri hack genellikle başka sorunlar getiriyor beraberinde, gibi olanları keman)?

(Benim için sürpriz oldu) bulabileceğim başka bir yer yok muydu bu tavsiye çünkü bu post ediyorum.

Bu, bir tarayıcı tanımlı giriş boyutlarına kısıtlama olmadan yapmak gerçekten kolay bir yolu var. Sadece gizli dosya yükleme düğmesi etrafında <label> etiket. Bu webkit's built-in styling ile şekillendirme şekillendirme izin verdiğinden daha fazla özgürlük için izin verir^[1].

Etiket etiket çocuk girişlerine üzerinde herhangi bir tıklama olayları yönlendiren kesin bir amaç için yapıldı^[2]bunu kullanarak , herhangi bir JavaScript giriş düğmesi için click olayı artık doğrudan gerekmez. Aşağıdaki gibi bir şey kullanmak istiyorum:

label.myLabel input[type="file"] {
    position: fixed;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid   span {
    color: #A44;
}
.myLabel :valid   span {
    color: #4A4;
}

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

Ben de kullandım bir sabit pozisyon gizlemek için girdi, çözüm sağlamak için bile eski sürümleri Internet Explorer (IE8 taklit - reddetti çalışmıyor bir de visibility:hidden display:none dosya-giriş). Ve taklit IE 7'de denedim ve mükemmel çalıştı.

1. Düğmeler stilleri kendinizi tanımlamak için <label>etiketleri içinde <button> s ne yazık ki kullanamazsınız. Benim için bu, bu yaklaşımın tek dezavantajı.
2. for öznitelik tanımlanmış ise, onun değeri aynı <label> for öznitelik olarak id ile giriş tetiklemek için kullanılır.