Selektor CSS dla pól wprowadzania tekstu?

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: :notpseudoklasa jest obsługiwana tylko od IE9.

Możesz użyć selektora atrybutów tutaj:

input[type="text"] {
    font-family: Arial, sans-serif;
}

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

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:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

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.

Za pomocą :textSelektora można wybrać wszystkie dane wejściowe z tekstem tekstowym

Working Fiddle

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:textjest 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 dla IE6+.

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}

Miałem pole tekstowe typu wejściowego w polu wiersza tabeli. Celuję w to za pomocą kodu

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}

Jak napisano powyżej w @Amir, najlepszym obecnie sposobem - w przeglądarce i porzuceniu IE6 - jest użycie

[type=text] {}

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 z input[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 .

Za pomocą selektora atrybutów wybieramy tekst typu wejściowego w CSS

input[type=text] {
background:gold;
font-size:15px;
 }

input [type = text]

Spowoduje to zaznaczenie całego tekstu wejściowego na stronie internetowej.

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/