如何在css中使用焦点选择器更改文本框的突出显示颜色 [英] How to change the highlight color of textbox using focus selector in css

问题描述

我是第一次使用 CSS 。我有一个输入文本字段，我需要将边框的颜色从红色更改为另一种颜色。我在 CSS 中使用焦点选择器，但未成功。

以下是输入字段：

I'm new to CSS. I have a input text field where I need to change the color of the border from red to another color. I used focus selector in CSS and was not successful.
Below is the input field :

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

编辑：
提交表单，因为它是必填字段，如果为空，则显示红色。
现在它不工作。

Edit : When I click submit form, as it is a required field, this shows red if empty. Now it is not working. How can I change the highlight color of the textbox when I focus on it.

推荐答案

显然，它不会作为你的选择器是错误的，您使用 .element text ，它选择 < text> （ ）

Obviously it won't work as your selector is wrong, you are using .element text which selects an element of <text>(Invalid tag) which is nested inside element having a class .element it should be

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

这篇关于如何在css中使用焦点选择器更改文本框的突出显示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！