Как стилизовать только один тип поля ввода без влияния на другие типы ввода с помощью CSS

Question

Есть ли способ написать правила стиля, которые будут влиять только на текстовые поля.Предположим, у меня есть следующее:

<div id="helloDiv">
<input type="text" name="something" /><br />
<input type="checkbox" name="somethingElse" /><br />
<input type="submit" name="go" />
</div>

div#helloDiv input {
   border: 1px solid red;
}

Проблема с вышеупомянутым правилом CSS заключается в том, что оно повлияет на ВСЕ поля ввода не только на ввод текста, но также на переключатели, кнопки отправки и т. Д.

Поэтому существует кросс-браузерное решение, позволяющее воздействовать только на один тип поля ввода внутри элемента div или другого элемента страницы (не прибегая к индивидуальному назначению стилей полей ввода по отдельности).

Answer 1

Самый утомительный, но совместимый с IE6 способ сделать это - дать всем вашим input type="text" элементам некоторый определенный класс CSS, например class="text", и нацелиться на этот класс только:

div#helloDiv input.text {
    /* Styles */
}

Самый простой, CSS2.1, но несовместимый с IE6 способ - просто

div#helloDiv input[type="text"] {
    /* Styles */
}

без изменения вашего HTML.

Приложение: для комментария анимусона выберите любой из них . Решите, нужно ли вам поддерживать IE6 или нет, и возьмите соответствующий код.

Answer 2

input[type=text] {}

Это не совместимо в IE6, но в большинстве других браузеров.Чтобы сделать его полностью совместимым с браузерами, вам нужно либо применить общий класс ко всем входам одного типа, либо использовать JavaScript.Смотри здесь .

Answer 3

Вы можете использовать селектор атрибута , который выглядит следующим образом:

input[type=text] {
  /* stuff */
}

Теперь поддержка этого не распространяется на Ye Olde IE6 .Поэтому многие люди просто кусают пули и добавляют классы к своим входам, чтобы придать им стиль.Затем вы можете установить общие стили для ваших входов, а затем изменить для конкретных видов.Итак, что-то вроде:

input { /* common styles */ }
input.mySubmit { /* only submit */ }
input.myText { /* only text */ }