Question

我正在使用Twitter Bootstrap 2.0，我想知道如何更改选择框，以便它们具有与文本框和其他表单元素相同的令人敬畏的蓝色光芒。

现在，除了选择框之外，我所拥有的所有表单元素都是蓝色的焦点。我注意到即使在http://twitter.github.com/bootstrap/base-css.html#forms上，当我将焦点放在选择框上时，它们会发出橙色，所以也许它还没有内置。有没有其他人不得不处理这个，或知道如何解决它？谢谢！

Answer 1

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 \9;
  /* IE6-9 */

}

2）然后对选择标签应用shadow_select类

<select class="input-small shadow_select">
     <option>AAAAA</option>
     <option>BBBBB</option>
     <option>CCCCC</option>
</select>

这适用于除webkit之外的所有其他浏览器。 for webkit wrap select使用div。然后使用jquery在select上检测焦点事件，并将CSS shadow类应用于该div。（因为焦点事件无法应用于div

Answer 2

在Sachindra的基础上jsfiddle说明了如何在webkit（Chrome，Safari）浏览器中执行此操作。

顺便提一句，Sachindra在第2点的类属性拼写不正确，这让我有点意见（shadow_slect - ＆gt; shadow_select）

Answer 3

如果你正在使用指南针，你可以抓住这些混音https://gist.github.com/2919841 然后像这样使用它们：

@import "compass-bootstrap-box-shadow" 

shadow_select
    @include bs-box-shadow
    &:focus, &:hover
        @include bs-box-shadow-focus

我是Sass和Compass的新手，所以如果你有任何改进，请随时告诉我。

Answer 4

如果您使用Sachindra上面的答案，它可能无法在webkit或其他现代浏览器中正常工作。为此，您只需要在“.shadow-select：focus”元素中包含这两个标记。这对我有用。

border-style: solid; border-width: 1px;

在Twitter Bootstrap中选择Box Glow Blue

4 个答案: