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 */

Demo

Demo 2 （让它更清洁）

Demo 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

.类缺少

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

<强> DEMO

Answer 3

您使用的.element text:focus没有选择任何内容，因为.element中没有像文字这样的元素。而不是这个你必须使用.element.text:focus 例如。

.element.text:focus{
   ...
}

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

3 个答案: