Html 如何使用css中的焦点选择器更改文本框的突出显示颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21450929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the highlight color of textbox using focus selector in css
提问by user3004356
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 CSSand was not successful.
Below is the input field :
我是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>
And the css :
和 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.
编辑：当我单击提交表单时，因为它是必填字段，如果为空，则显示为红色。现在它不工作了。当我专注于文本框时，如何更改它的突出显示颜色。
回答by Mr. Alien
Obviously it won't work as your selector is wrong, you are using .element textwhich selects an element of <text>class.elementit should be
显然它不会工作，因为您的选择器是错误的，您正在使用.element text它选择嵌套在元素内部的（无效标签）元素，它应该是<text>class.element
.element.text:focus
--^--
/* No space as well */
Demo 2(Making it lil cleaner)
演示 2（让它变得更干净）
Demo 3(Animating the :focus)
演示 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);
}
回答by Sowmya
.is missing from textclass and try pointing from input
.从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);
}
回答by Arjun
You are using .element text:focuswhich selects nothing because there is no element like text in .element. Instead of this you have to use .element.text:focusfor eg.
您正在使用.element text:focuswhich 不选择任何内容，因为.element. 而不是这个，你必须使用.element.text:focus例如。
.element.text:focus{
...
}
