CSS 在 Twitter Bootstrap 中使选择框发出蓝色光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9834961/
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
Making Select Boxes Glow Blue in Twitter Bootstrap
提问by yellowreign
I'm using Twitter Bootstrap 2.0 and I was wondering how to change the select boxes so they have the same awesome blue glow that text boxes and other form elements do.
我正在使用 Twitter Bootstrap 2.0，我想知道如何更改选择框，使它们具有与文本框和其他表单元素相同的令人敬畏的蓝色光晕。
Right now all of the form elements I have is blue when focus is put on them, except the select boxes. I noticed that even on http://twitter.github.com/?bootstrap/base-css.html#forms?when I put my focus on the select boxes they glow orange, so maybe it's not built in yet. Has anyone else had to deal with this, or know how to fix it? Thank you!
现在，当焦点放在它们上时，我拥有的所有表单元素都是蓝色的，除了选择框。我注意到，即使在 http://twitter.github.com/?bootstrap/base-css.html#forms 上？当我将注意力集中在选择框上时，它们会发出橙色光，所以可能它还没有内置。有没有其他人不得不处理这个问题，或者知道如何解决它？谢谢！
回答by Sachindra
1) Add following lines to bootstrap.css file
1) 将以下行添加到 bootstrap.css 文件
.shadow_select {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.shadow_select:focus {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted ;
/* IE6-9 */
}
2) Then apply shadow_select class for select tags
2) 然后为选择标签应用 shadow_select 类
<select class="input-small shadow_select">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
</select>
This works on all other browsers except webkit. for webkit wrap select using div. Then use jquery to detect focus event on select and apply CSS shadow class to that div. (Because focus event can't be applied to a div
这适用于除 webkit 之外的所有其他浏览器。对于使用 div 的 webkit 包装选择。然后使用 jquery 检测 select 上的焦点事件并将 CSS 阴影类应用于该 div。（因为焦点事件不能应用于 div
回答by tocallaghan
Building on Sachindra's this jsfiddleillustrates how to do this in webkit (Chrome, Safari) browsers.
基于 Sachindra 的这个jsfiddle说明了如何在 webkit（Chrome、Safari）浏览器中执行此操作。
Incidentally Sachindra's class attribute in point 2 is spelled incorrectly, which threw me for a bit (shadow_slect -> shadow_select)
顺便说一句，第 2 点中 Sachindra 的类属性拼写错误，这让我有点困惑（shadow_slect -> shadow_select）
回答by Gerry
If you're using Compass you can grab the these mixins https://gist.github.com/2919841and then use them as like so:
如果您使用 Compass，您可以获取这些 mixins https://gist.github.com/2919841，然后像这样使用它们：
@import "compass-bootstrap-box-shadow"
shadow_select
@include bs-box-shadow
&:focus, &:hover
@include bs-box-shadow-focus
I'm brand new to Sass and Compass, so if you have any improvements please don't hesitate to let me know.
我是 Sass 和 Compass 的新手，所以如果您有任何改进，请随时告诉我。
回答by roneo
If you are using Sachindra's answer above, it might not work correctly in webkit or other modern browsers. For that you just need to include these two tags in the " .shadow-select:focus " element. This worked for me.
如果您使用 Sachindra 上面的答案，它可能无法在 webkit 或其他现代浏览器中正常工作。为此，您只需要在“ .shadow-select:focus ”元素中包含这两个标签。这对我有用。
border-style: solid;
border-width: 1px;
border-style: solid;
border-width: 1px;
