2013-07-17 8 views
11

aşağıdaki HTML olduğunu düşünelim. Şimdi sadece metin girişlerini biçimlendirmek istiyorum. ararken Ne bulmaknasıl CSS ile metin giriş alanları hedefleyebilir?</p> <pre><code><input /> <br /> <input type=text /> </code></pre> <p>Elbette, benim HTML ben de giriş alanlarının diğer tip (onay kutularını, vs.) sahip olacaktır:

, CSS aşağıdaki yapmaktır:

nitelik açıkça mevcut olduğu ikinci girişi için
input[type=text] { background: red; } 

, bu çalışır. İlk önce, IE8'de çalışır, ancak IE10'da değil. Ayrıca Chrome'da değil.

Yani her yerde type=text koymak zorunda değil ise, tüm metin giriş alanları ve sadece metin giriş alanını hedef nasıl?

Bir jsFiddle bu görebiliriz. IE8 için jsFiddle işe nasıl these instructions kontrol, ancak şuna benzer: ağrılı

enter image description here

cevap

16

Eğer type="text" ihmal edebilmek istiyorsanız ... işe almak ve hala selektör maçı olabilir , sen CSS3 içinde not psuedoselector mevcut kullanmak zorunda olacak:

input[type="text"], input:not([type]) { 
    ... 
} 

http://jsfiddle.net/dByqP/5/

Bu IE'nin önceki sürümlerinde çalışmaz, CSS3 de bu tarayıcılar desteklenmez olarak.

iyi çözüm geçmesi ve metin girişlerine type="text" ekleyebilir ve sadece orijinal seçici kullanmak olacaktır.

+1

Oh, ama: Netscape veya IE 6 ve daha önceki sürümlerde çalışmayacaksınız ... :-) –

+0

@ rodrigo-silveira http://lifehacker.com/5925287/dear-web-user-please-upgrade-your -browser: P – jbabey

+1

Harika bir yazı, @jbabey Hala IE kullanan büyükanneme ileteceğim ... –

1

Bir, ama yapabileceği emin yolu sadece

input { 
    /* ... */ 
} 
üzerine stilini ayarlamaktır her tarayıcıda metin girişi hedef alacağını

, o zaman ne yaptığını yapmak ve bir metin girişi değil girişinin her türünü hedefleyebilir:

input[type=range] {} 
input [type=phone] {} 
// etc. 

Bu şekilde, bile: CSS3 kullanılamaz operatör bir tarayıcı tarafından desteklenmemektedir, yine

+0

Bu işe yarar, ama tersi bir yaklaşımdır. Benim durumumda, çok fazla çalışma gerektireceğini düşünüyorum çünkü her tür girdi için istisna yapmak zorundayım. Tüm yapmak istediğim metin giriş elemanları stil olsa da. – Peter

0

Stil bir sınıf ve CSS kullanarak giriş:

.redBG 
{ 
    background: red; 
} 

Sonra HTML:

<input class="redBG" /> 

jsFiddle ektedir.

+1

Eh, bir sınıf ekleyebiliyorsanız, bir tür ekleyebilirsiniz ... – Brewal

+0

@Benel düşüncem birden fazla stilin gerekli olabileceğini düşünüyorum ... Yanlış seçmiş olabilirim! –

+0

Bu yaklaşımın olumsuz tarafı, sitenizin tamamında belirli bir görünüm elde etmek istiyorsanız, sınıfı tüm giriş öğelerine eklemeniz gerekir. Benim senaryo için çok uygun değil. – Peter

1

Benim önerim mavi düğmeye örneğin girişi için varsayılan stil gerekirse

input { 
    background-color: red; 
} 

sonra başka bir şey için stil üzerine olması, gerekir tabii

input[type='button'] { 
    background-color: blue; 
} 

sahip olacaktır Belirli giriş türleri için belirli stilleri belirlemek ve belirtmek, ancak bu, örneğin, benzersiz bir düğme istiyorsanız, yine de yapamayacağınız anlamına gelmez.

+0

Bahsettiğiniz gibi, çok iş olurdu. Oysa ben sadece girdi metin elemanlarını şekillendirmek istiyorum, burada diğer tüm eleman türleri için istisnalar yapmak zorundayım. – Peter

+0

Evet jbabey'in cevabı benimkinden çok daha iyi. CSS XD'imde güncel kalmaya ihtiyacım var. – pandavenger

İlgili konular