css селектор для полей ввода текста?

<p>как настроить таргетинг на поля ввода типа «текст» с помощью селекторов css? </p>

<pre><code>input[type=text] </code></pre><p>или, чтобы ограничить ввод текста внутри форм</p><pre><code>form input[type=text] </code></pre><p>или, чтобы в дальнейшем ограничиться определенной формой, предполагая, что она имеет идентификатор <code>myform</code></p><pre><code>#myform input[type=text] </code></pre><p><em>примечание: это не поддерживается ie6, поэтому, если вы хотите разрабатывать для ie6, либо используйте ie7.js (как предложил и цзян), либо начните добавлять классы ко всем вашим текстовым вводам.</em></p><p>ссылка: <a href="http://www.w3.org/tr/css2/selector.html#attribute-selectors">http://www.w3.org/tr/css2/selector.html#attribute-selectors</a> </p><hr><p>поскольку <a href="http://www.w3.org/tr/css2/selector.html#default-attrs">указано</a> что значения атрибутов по умолчанию не всегда можно выбрать с помощью селекторов атрибутов, можно попытаться охватить другие случаи разметки, для которых отображаются текстовые входы:</p><pre><code>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' </code></pre><p>тем не менее это оставляет случай, когда тип определен, но имеет недопустимое значение, и это все равно возвращается к type = "text". чтобы покрыть это, мы могли бы использовать выбор всех входов, которые не являются ни одним из других известных типов</p><pre><code>input:not([type=button]):not([type=password]):not([type=submit])... </code></pre><p>но этот селектор был бы довольно нелепым, а также <a href="https://developer.mozilla.org/en-us/docs/web/html/element/input">список возможных типов</a> растет с добавлением новых функций в html.</p><p><em>обратите внимание: псевдокласс <a href="https://developer.mozilla.org/en-us/docs/web/css/:not"><code>:not</code></a> поддерживается только начиная с ie9.</em></p>

<p>вы можете использовать селектор атрибутов здесь: </p><pre><code>input[type="text"] { font-family: arial, sans-serif; } </code></pre><p>это поддерживается в ie7 и выше. вы можете использовать <a href="http://code.google.com/p/ie7-js/">ie7.js</a> , чтобы добавить поддержку для этого, если вам нужно поддерживать ie6. </p><p>смотрите: <a href="http://reference.sitepoint.com/css/attributeselector">http://reference.sitepoint.com/css/attributeselector</a> для получения дополнительной информации</p>

<p>я обычно использую селекторы в моей основной таблице стилей, а затем создаю специфичный для ie6 файл .js (jquery), который добавляет класс ко всем типам ввода. пример:</p><pre><code>$(document).ready(function(){ $("input[type='text']").addclass('text'); )}; </code></pre><p>а затем просто скопируйте мои стили в таблицу стилей ie6, используя классы. таким образом, фактическая разметка немного чище.</p>

<p>вы можете использовать <code>:text</code> selector для выбора всех входов с типом текста</p><p><strong> <a href="http://jsfiddle.net/aash1010/c7qlpv9o/">работает fiddle</a> </strong></p><pre><code>$(document).ready(function () { $(":text").css({ //or $("input:text") 'background': 'green', 'color':'#fff' }); }); :text является расширением jquery и не является частью спецификации css, запросы с использованием: text не могут воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным методом dom queryselectorall (). для повышения производительности в современных браузерах используйте вместо этого [type="text"]. это будет работать для ie6+.$("[type=text]").css({ // or $("input[type=text]") 'background': 'green', 'color':'#fff' }); </code></pre><p><strong>css</strong></p><pre><code>[type=text] // or input[type=text] { background: green; } </code></pre>

<p>у меня было поле ввода типа текста в поле строки таблицы. я использую код</p><pre><code>.admin\_table input[type=text]:focus { background-color: #fee5ac; } </code></pre>

<p>как писал @amir выше, в настоящее время лучший способ - кросс-браузерный и оставляющий позади ie6 - это использовать</p><pre class="lang-css prettyprint-override"><code>[type=text] {} </code></pre><p>никто не упомянул более низкую специфичность css ( <a href="http://csswizardry.com/2014/10/the-specificity-graph/">почему</a> <a href="https://css-tricks.com/specifics-on-css-specificity/">это</a> <a href="https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">это</a> <a href="http://snook.ca/archives/html\_and\_css/understanding\_c">важно</a> ?), <code>[type=text]</code> <a href="http://specificity.keegan.st/">особенности</a> 0,0,1,0 вместо 0,0, 1,1 с <code>input[type=text]</code>.</p><p>с точки зрения производительности, больше нет никаких негативных последствий. </p><p>нормализовать только что выпущенный v4.0.0 <a href="https://github.com/necolas/normalize.css/pull/537">с пониженной специфичностью селектора</a> .</p>

<p>с помощью селектора атрибутов мы нацеливаем тип ввода текста в css</p><pre><code>input[type=text] { background:gold; font-size:15px; } </code></pre>

<p>входной [тип = текст]</p><p>это выберет весь тип ввода текста на веб-странице.</p>