HTML- 在焦点突出显示边框上选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32514993/
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
HTML- Select box on focus highlight border
提问by User12345
I'm trying to highlight the border of the select box/div when that box is in use to select an item
当该框用于选择项目时，我试图突出显示选择框/div 的边框
Here's the code on hTML side
这是 hTML 端的代码
<div class="styled-1">
<select>
<option value="1">OPTION - 1</option>
<option value="2">OPTION -2 </option>
<option value="3">OPTION - 3</option>
</select>
</div>
Here's the CSS
这是 CSS
.styled-1 select {
width: 312px;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 5%;
border: none;
left: 50px;
margin-left: 20px;
margin-right: 20px;
border-radius: 50px;
box-shadow: 0 0 3pt 2pt #8F4A11;
outline: none !important;
}
What is the way pout to define a CSS of the type below for ".styled-1" above?
为上面的“.styled-1”定义下面类型的CSS的方式是什么？
textarea:focus {
outline: none !important;
box-shadow: 0 0 3pt 2pt #719ECE;
}
I tried the below but no luck
我尝试了以下但没有运气
.styled-1:focus {
outline: none !important;
box-shadow: 0 0 3pt 2pt #719ECE;
}
回答by hktang
:focusworks on the selectelement; so, you can style the selectelement like this:
:focus作用于select元素；所以，你可以select像这样设置元素的样式：
.styled-1 select:focus {
box-shadow: 0 0 3pt 2pt #719ECE;
}
Here's a JSfiddle showing the results: http://jsfiddle.net/n83p5qz7/
这是一个显示结果的 JSfiddle：http: //jsfiddle.net/n83p5qz7/
回答by Mohit Shrivastava
回答by Antonio Hernández
It doesn't work because you are passing the :focuspseudo-selector to the divinstead of the element inside the selectyou want to target.
Try something like this:
它不起作用，因为您将:focus伪选择器传递给您想要定位的div而不是内部的元素select。尝试这样的事情：
.styled-1 > select option:focus {
border: 1px solid 'your preferred color here'
box-shadow: 0 0 3pt 2pt #719ECE;
}
}
Edit: Seems that I misunderstood your objective. This works but not to what you want to achieve.
编辑：似乎我误解了你的目标。这有效，但不适用于您想要实现的目标。
