Jak mogę kierować pola wprowadzania typu „tekst” za pomocą selektorów CSS?
źródło
Jak mogę kierować pola wprowadzania typu „tekst” za pomocą selektorów CSS?
input[type=text]
lub, aby ograniczyć się do wprowadzania tekstu w formularzach
form input[type=text]
lub, aby ograniczyć się do określonej formy, zakładając, że ma identyfikator myForm
#myForm input[type=text]
Uwaga: To nie jest obsługiwane przez IE6, więc jeśli chcesz programować dla IE6, użyj IE7.js (jak zasugerował Yi Jiang) lub zacznij dodawać klasy do wszystkich wprowadzanych tekstów.
Odniesienie: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Ponieważ określono, że domyślne wartości atrybutów nie zawsze mogą być wybierane za pomocą selektorów atrybutów, można spróbować objąć inne przypadki znaczników, dla których renderowane są dane wejściowe:
input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'
Wciąż jednak tak jest, gdy typ jest zdefiniowany, ale ma niepoprawną wartość i nadal powraca do type = "text". Aby to wyjaśnić, możemy użyć zaznaczenia wszystkich danych wejściowych, które nie są jednym z innych znanych typów
input:not([type=button]):not([type=password]):not([type=submit])...
Ale ten selektor byłby dość śmieszny, a także lista możliwych typów rośnie wraz z dodawaniem nowych funkcji do HTML.
Uwaga: :not
pseudoklasa jest obsługiwana tylko od IE9.
Możesz użyć selektora atrybutów tutaj:
Jest to obsługiwane w IE7 i nowszych wersjach. Możesz użyć IE7.js, aby dodać obsługę tego, jeśli potrzebujesz obsługi IE6.
Zobacz: http://reference.sitepoint.com/css/attributeselector, aby uzyskać więcej informacji
źródło
sans-serif
nie jestsan-serif
.Zazwyczaj używam selektorów w moim głównym arkuszu stylów, a następnie tworzę plik .js (jquery) specyficzny dla ie6, który dodaje klasę do wszystkich typów danych wejściowych. Przykład:
A następnie po prostu zduplikuj moje style w arkuszu stylów IS6 za pomocą klas. W ten sposób rzeczywiste znaczniki są nieco czystsze.
źródło
Za pomocą
:text
Selektora można wybrać wszystkie dane wejściowe z tekstem tekstowymWorking Fiddle
:text
jest rozszerzeniem jQuery i nie stanowi części specyfikacji CSS, kwerendy wykorzystujące: tekst nie mogą skorzystać ze zwiększenia wydajności zapewnianego przez natywną metodę DOM querySelectorAll (). Aby uzyskać lepszą wydajność w nowoczesnych przeglądarkach, użyj[type="text"]
zamiast tego. To zadziała dlaIE6+
.CSS
źródło
Miałem pole tekstowe typu wejściowego w polu wiersza tabeli. Celuję w to za pomocą kodu
źródło
Jak napisano powyżej w @Amir, najlepszym obecnie sposobem - w przeglądarce i porzuceniu IE6 - jest użycie
Jak dotąd nikt nie wspominał o niższej specyficzności CSS ( dlaczego to takie ważne ?),
[type=text]
Zawiera 0,0,1,0 zamiast 0,0,1,1 zinput[type=text]
.Pod względem wydajności nie ma już żadnego negatywnego wpływu.
właśnie znormalizowana wersja 4.0.0 z obniżoną specyficznością selektora .
źródło
Za pomocą selektora atrybutów wybieramy tekst typu wejściowego w CSS
źródło
input [type = text]
Spowoduje to zaznaczenie całego tekstu wejściowego na stronie internetowej.
źródło
Selektory atrybutów są często używane do wprowadzania danych. Oto lista selektorów atrybutów:
[tytuł] Wszystkie elementy z atrybutem tytułu są zaznaczone.
[title = banana] Wszystkie elementy, które mają wartość „banana” atrybutu title.
[title ~ = banana] Wszystkie elementy zawierające „banana” w wartości atrybutu title.
[tytuł | = banan] Wszystkie elementy, których wartość atrybutu title zaczyna się od „banan”.
[tytuł ^ = banan] Wszystkie elementy, których wartość atrybutu title zaczyna się od „banan”.
[title $ = banana] Wszystkie elementy, których wartość atrybutu title kończy się na „banana”.
[title * = banana] Wszystkie elementy, których wartość atrybutu title zawiera podłańcuch „banana”.
Odniesienie: https://kolosek.com/css-selectors/
źródło