Selektor CSS dla pól wprowadzania tekstu?
Jak mogę kierować pola wejściowe typu 'text' za pomocą selektorów CSS?
9 answers
input[type=text]
Lub, aby ograniczyć do wprowadzania tekstu wewnątrz formularzy
form input[type=text]
Lub, aby ograniczyć się dalej do pewnej formy, zakładając, że ma ona id myForm
#myForm input[type=text]
uwaga: nie jest to obsługiwane przez IE6, więc jeśli chcesz rozwijać dla IE6, użyj IE7.js (jak zasugerował Yi Jiang) lub zacznij dodawać klasy do wszystkich wejść tekstowych.
Numer referencyjny: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Ponieważ jest określone , że domyślnie 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 dane wejściowe są renderowane:
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'
Nadal pozostawia to przypadek, gdy typ jest zdefiniowany, ale ma nieprawidłową wartość i nadal wraca do type = "text". Aby to pokryć, możemy użyć select wszystkich wejść, 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 z nowymi funkcjami dodawanymi do HTML.
Notice: the :not pseudo-Klasa jest obsługiwana tylko od IE9.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-04 08:08:37
Możesz użyć selektora atrybutów tutaj:
input[type="text"] {
font-family: Arial, sans-serif;
}
Jest to obsługiwane w IE7 i wyżej. Możesz użyć IE7.js aby dodać wsparcie dla tego, jeśli potrzebujesz wsparcia IE6.
Zobacz: http://reference.sitepoint.com/css/attributeselector więcej informacji
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-05 22:53:23
Zazwyczaj używam selektorów w moim głównym arkuszu stylów, a następnie tworzę specyfikację ie6 .plik js (jquery), który dodaje klasę do wszystkich typów wejściowych. Przykład:
$(document).ready(function(){
$("input[type='text']").addClass('text');
)};
A następnie po prostu Powiel moje style w arkuszu stylów ie6 za pomocą klas. W ten sposób rzeczywiste znaczniki są trochę czystsze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-06 19:26:24
Możesz użyć selektora :text, aby wybrać wszystkie wejścia z tekstem typu
$(document).ready(function () {
$(":text").css({ //or $("input:text")
'background': 'green',
'color':'#fff'
});
});
:text jest rozszerzeniem jQuery, a nie częścią specyfikacji CSS, zapytania używając :text nie mogą wykorzystać zwiększenia wydajności dostarczanej przez natywną metodę DOM QUERYSELECTORALL (). Aby uzyskać lepszą wydajność w nowoczesnych przeglądarkach, użyj [type="text"]. 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-09 07:56:41
Miałem pole tekstowe typu input w polu wiersza tabeli. Celuję w to kodem
.admin_table input[type=text]:focus
{
background-color: #FEE5AC;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-24 06:57:28
Jak napisał powyżej @Amir, najlepszym sposobem w dzisiejszych czasach-cross-browser i pozostawienie IE6-jest użycie
[type=text] {}
Nikt nie wspomniał o niższej specyficzności CSS ( Dlaczego na że Ważne ?) so far, [type=text] funkcje 0,0,1,0 zamiast 0,0,1,1 z input[type=text].
Normalize v4.0. 0 właśnie wydany z obniżoną specyfikacją selektora.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-05 23:05:17
Selektorem atrybutów kierujemy tekst typu input w CSS
input[type=text] {
background:gold;
font-size:15px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-19 11:07:05
Input[type=text]
Spowoduje zaznaczenie całego tekstu typu wejściowego na stronie internetowej.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-17 18:41:10
Selektory atrybutów są często używane do wprowadzania danych. Oto lista selektorów atrybutów:
[tytuł] Zaznaczone są wszystkie elementy z atrybutem title.
[title=banan] Wszystkie elementy, które mają wartość "banan" atrybutu title.
[title~ = banan] Wszystkie elementy, które zawierają "banan" w wartości atrybutu title.
[title / = banan] Wszystkie elementy, których wartość atrybutu title zaczyna się od 'banan'.
[title^ = banan] Wszystkie elementy, których wartość atrybutu title zaczyna się od 'banan'.
[title$ = banan] Wszystkie elementy, których wartość atrybutu title kończy się na 'banan'.
[title* = banan] Wszystkie elementy, których wartość atrybutu title zawiera podłańcuch "banan".
Numer referencyjny: https://kolosek.com/css-selectors/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-11 06:52:49