Jak mogę kierować reklamy na pola tekstowe za pomocą CSS?

Question

Powiedzmy, że masz następujący kod HTML:

<input /> 
<br /> 
<input type=text /> 

Oczywiście, w moim HTML będę mieć inny rodzaj pól wejściowych, jak również (pól, etc). Teraz chcę tylko stylować wejścia tekstowe.

Co znajdę przy szukaniu, jest wykonanie następujących czynności w CSS:

input[type=text] { background: red; } 

Do drugiego wejścia, gdzie atrybut jest wyraźnie obecny, to działa. Po pierwsze jednak działa w IE8, ale nie w IE10. Również nie w Chrome.

W jaki sposób mogę kierować wszystkie pola wprowadzania tekstu i tylko pole tekstowe, bez konieczności umieszczania wszędzie numeru type=text?

Możesz to zobaczyć w jsFiddle. Dla IE8, sprawdź these instructions, w jaki sposób dostać jsFiddle do pracy, ale wygląda to tak:

Answer 1

Jeśli chcesz móc pominąć type="text" i nadal możesz wybrać selektor , trzeba będzie użyć dostępnych not psuedoselector w CSS3:

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

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

To nie będzie działać w niższych wersjach IE, jak CSS3 nie jest dobrze obsługiwany w tych przeglądarkach.

Najlepszym rozwiązaniem byłoby przejrzeć i dodać type="text" do wprowadzanych tekstów i po prostu użyć oryginalnego selektora.

Answer 2

Jeden bolesne, ale pewny sposób mógłby zrobić, to ustawić styl na wprost

input { 
    /* ... */ 
} 

które skierowane byłoby wprowadzanie tekstu w każdej przeglądarce, a następnie można zrobić to, co robisz, i kierować każdy typ wejścia, które nie jest do wprowadzania tekstu:

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

W ten sposób, nawet jeśli operator: not nie jest dostępny w CSS3, nie jest obsługiwany przez przeglądarkę, nadal możesz go uruchomić ...

Answer 3

Style wejście przy użyciu klasy i CSS:

.redBG 
{ 
    background: red; 
} 

Wtedy twój HTML jest:

<input class="redBG" /> 

Dołączone jsFiddle.

Answer 4

Moja sugestia będzie mieć domyślny styl dla wejścia być

input { 
    background-color: red; 
} 

następnie zastąpić styl dla czegoś innego, jeśli to konieczne, na przykład niebieski przycisk

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

oczywiście będzie trzeba przejść i określić określone style dla określonych typów danych wejściowych, ale to nie znaczy, że i tak byś tego nie zrobił, gdybyś chciał na przykład mieć unikatowy przycisk.