我是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,.075),0 0 8px rgba(102,175,233,0.6);
Box-shadow: inset 0 1px 1px rgba(0,0.6);
}
编辑：
当我单击提交表单时,因为它是必填字段,如果为空则显示红色.
现在它不起作用.当我专注于文本框时,如何更改文本框的高亮颜色.
解决方法
显然它不会起作用,因为你的选择器是错误的,你正在使用.element文本选择< text>(无效标签)的元素,它嵌套在具有类.element的元素中它应该是
.element.text:focus
--^--
/* No space as well */
Demo 2(让它变得更干净)
Demo 3(动画：焦点)
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.6);
}
