在Twitter Bootstrap中选择Box Glow Blue

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 - > shadow_select)