Как написать правильный селектор для того, что находится внутри поля ввода?

Question

У меня есть форма ввода, и мне нужно написать хороший селектор.Мне нужно назначить атрибуты только для того, что находится внутри поля ввода.Форма выглядит следующим образом:

<label></label>
<input type="text" disabled="disabled" name="xxx" size="100" value="abcd" class="yyy" />

однако у меня есть больше элементов этого класса на моей странице.

Каков наилучший путь?

Answer 1

Вы можете использовать либо input.yyy {}, который будет работать во всех браузерах, но если у вас есть более одного элемента ввода на странице с классом yyy, он выберет все из них.

Альтернативой является ввод [name = xxx] с использованием нового селектора CSS3, но он не будет работать в старых браузерах, поэтому зависит от того, насколько важно, чтобы стиль работал везде.

Answer 2

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

<style type="text/css">
.yyy {
  font-size: 14px;
  font-family: Arial;
  color: #FF0000;
}
</style>

Вы, конечно, можете вставить этот HTML-код выше и вставить его в свой HTML-документ, но лучше не использовать HTML и CSS отдельно друг от друга.

Поэтому добавьте этот код в заголовок:

<link href="some/style.css" type="text/css" rel="stylesheet" />

И внутри style.css:

.yyy {
 font-size: 14px;
 font-family: Arial;
 color: #FF0000;
}