如何使用css中的焦点选择器更改文本框的突出显示颜色

Question

我是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);
}  

编辑: 当我单击提交表单时,因为它是必填字段,如果为空则显示红色.现在它不起作用.当我专注于文本框时,如何更改文本框的高亮颜色.

Answer 1

显然它不会起作用,因为你的选择器是错误的,你正在使用.element text它选择一个元素(无效标签)嵌套在元素中它应该是<text>class .element

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

演示

演示2 (让它更清洁)

演示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);
}