Selektor CSS dla <input type = „?”

105

Czy w CSS jest jakiś sposób na kierowanie wszystkich danych wejściowych na podstawie ich typu? Mam wyłączoną klasę, której używam na różnych wyłączonych elementach formularza, i ustawiam kolor tła dla pól tekstowych, ale nie chcę, aby moje pola wyboru miały ten kolor.

Wiem, że mogę to zrobić z oddzielnymi klasami, ale wolałbym używać CSS, jeśli to możliwe. Jestem pewien, że mogę to ustawić w javascript, ale znowu szukam CSS.

Celuję w IE7 +. Więc nie sądzę, żebym mógł używać CSS3.

Edytować

Z CSS3 byłbym w stanie zrobić coś takiego?

INPUT[type='text']:disabled to byłoby jeszcze lepsze całkowite pozbycie się mojej klasy ...

Edytować

Ok dzięki za pomoc! Oto selektor, który modyfikuje wszystkie pola tekstowe i obszary, które zostały wyłączone, bez konieczności ustawiania żadnych klas, kiedy zacząłem to pytanie, nigdy nie sądziłem, że jest to możliwe ...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Działa to w IE7

css internet-explorer css-selectors JoshBerke
źródło
2
Napisałem artykuł zawierający szczegółowe informacje na temat selektorów atrybutów CSS.
Sarfraz

Odpowiedzi:

155

Tak. IE7 + obsługuje selektory atrybutów:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Element wejściowy z typem atrybutu, który zawiera wartość, która jest równa, zaczyna się, zawiera lub kończy określoną wartością.

Inne bezpieczne selektory (IE7 +) to:

  • Rodzic> dziecko, które: p > span { font-weight: bold; }
  • Poprzedzony ~ elementem, którym jest: span ~ span { color: blue; }

Za <p><span/><span/></p>co skutecznie dałoby ci:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Dodatkowe informacje: Zgodność przeglądarek z CSS na quirksmode.com

Dziwię się, że wszyscy myślą, że nie da się tego zrobić. Selektory atrybutów CSS istnieją już od jakiegoś czasu. Myślę, że czas wyczyścić nasze pliki .css.

Filip Dupanović
źródło
Ok, próbowałem tego, ale teraz nie działa, więc muszę mieć pomieszaną składnię.
JoshBerke
Właśnie sprawiłeś, że mój dzień stał się lepszy! Teraz, jeśli chcesz, aby mój tydzień, powiedz mi, że można to zrobić w IE6 bez użycia wyrażeń hehe :-) j / k tam
JoshBerke
13
Niestety nie może. Przestałem wspierać IE6 z powodu poglądów religijnych i sugeruję, abyśmy wszyscy też to robili. Dzisiaj korzystam z warunkowego komentarza IE, aby powiedzieć użytkownikom, że ich komputer i prywatność są zagrożone podczas korzystania z IE6 i że powinni natychmiast zaktualizować: P
Filip Dupanović
1
Wydaje mi się, że jestem tak przyzwyczajony do obsługi IE6, że po prostu założyłem, że to też nie zadziała w IE7
TJ L
4
Chciałbym móc przestać wspierać IE6, ale nie mogę i nie mogę zrobić tak, jak sugerowałeś ... Ale naprawdę bardzo chciałbym móc ;-)
JoshBerke
3

Niestety inne plakaty są poprawne, że jesteś ... właściwie tak, jak poprawił go kRON, jesteś w porządku ze swoim IE7 i ścisłym dokumentem, ale większość z nas z wymaganiami IE6 jest zredukowana do JS lub odwołań do klas, ale tak jest właściwość CSS2, tylko jedna bez wystarczającej obsługi przeglądarek IE ^ h ^ h.

Poza kompletnością selektor typu ma - podobnie jak xpath - postać, [attribute=value]ale istnieje wiele interesujących wariantów. To będzie dość silny, gdy jest ona dostępna, dobrze jest zachować w głowie dla IE8.

annakata
źródło
Masz bardziej zaktualizowaną pomoc techniczną przeglądarki? To jest oparte na IE7 beta, chciałbym zobaczyć IE8
JoshBerke
IE8 jest nadal w wersji beta, ale quirksmode mówi „tak”: quirksmode.org/css/contents.html
annakata
Nadal obsługuję IE6, ale nie to dodana mała wizualna poprawka.
JoshBerke
w porządku, to był mój błąd odpowiadając na podstawie tytułu, zwykle odpowiadam na ogólne przypadki - naprawdę powinienem czytać więcej pytań :)
annakata
1

Możesz to zrobić za pomocą jQuery. Używając ich selektorów, możesz wybierać według atrybutów, takich jak typ. Wymaga to jednak, aby użytkownicy mieli włączoną obsługę Javascript i dodatkowy plik do pobrania, ale jeśli to działa ...

cdeszaq
źródło
0

Przepraszamy, krótka odpowiedź brzmi: nie. CSS (2.1) zaznaczy tylko elementy DOM, a nie ich atrybuty. Musiałbyś zastosować określoną klasę do każdego wejścia.

Bummer wiem, bo to byłoby niezwykle przydatne.

Wiem, że powiedziałeś, że wolisz CSS od JavaScript, ale nadal powinieneś rozważyć użycie jQuery. Zapewnia bardzo czysty i elegancki sposób dodawania stylów do elementów DOM na podstawie atrybutów.

Phil Wheeler
źródło
jquery to sposób na zrobienie tego lub ogólnie JavaScript
TravisO
4
Tak, ta odpowiedź jest nieprawidłowa (część CSS 2.1): w3.org/TR/CSS21/selector.html#attribute-selectors . Jeśli nie, proszę wyjaśnić swoją odpowiedź.
cic
1
Przepraszam - masz rację. Po prostu oczekuję najmniej od IE7, ponieważ tak często programiści wciąż muszą obsługiwać IE6 w tym samym czasie. Powinienem był uważniej przeczytać pytanie i odrobić pracę domową.
Phil Wheeler