如何在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);
}  

Answer 2

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

.element.text:focus{
...
}

Answer 3

text类中缺少.，请尝试从输入指向

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

演示