Html 如何在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>  

.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);
}  

编辑： 当我点击提交表单时，因为它是必填字段，如果为空，则显示红色。

---

现在它不起作用了。当我聚焦文本框时，如何更改其突出显示的颜色。

显然它不会工作，因为您的选择器是错误的，您使用的是

.element text

，它选择了

（无效标记）的元素，该元素嵌套在具有

类的
.element
的元素中

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


（让它更干净）

（设置
：焦点的动画）

文本中缺少
，请尝试从输入指向

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

您正在使用
.element text:focus
不选择任何内容，因为
.element
中没有类似元素的文本。您必须使用
.element.text:focus
例如

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

.element.text:focus{
   ...
}