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

Я новичок в в CSS. У меня есть текстовое поле ввода, где мне нужно изменить цвет границы с красного на другой цвет. Я использовал селектор фокуса в в CSS и не удалось.
ниже находится поле ввода :

<label>Phone<font color="red">*</font></label><br>
<span>
    <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value=""  type="text"> -
</span>
<span>
    <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -
</span>
<span>
    <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value=""  type="text" required >
</span>

и css:

.element text:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Edit: Когда я нажимаю отправить форму, так как это обязательное поле, оно отображается красным, если пусто. Теперь это не работает. Как я могу изменить выделите цвет текстового поля, когда я фокусируюсь на нем.

7
css css-selectors html

3 ответов

очевидно, что это не будет работать, поскольку ваш селектор неправильный, вы используете .element text который выбирает элемент <text>(неверный тег), который вложен внутри элемента, имеющего class .element он должен быть!--12--> 

.element.text:focus
      --^--
 /* No space as well */

демо

демо-2 (делая его Lil cleaner)

демо 3 (анимации :focus)

span input[type="text"]:focus { /* You can also use .element.text:focus here */
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
16

. отсутствует text класс и попробуйте указать из input

input.text:focus {
  border-color: green;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

демо

0

вы используете .element text:focus которая ничего не выбирает, потому что нет такого элемента, как текст в .element. Вместо этого вы должны использовать .element.text:focus для EG.

.element.text:focus{
   ...
}
0