Making Select Boxes Glow Blue in Twitter Bootstrap

Question

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.

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!

Answer 1

1) Add following lines to bootstrap.css file

.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) Then apply shadow_select class for select tags

<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