CODEWITHSUNDEEP
csstwitter-bootstrap
yellowreign
yellowreign

Reputation: 3638

Making Select Boxes Glow Blue in Twitter Bootstrap

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!

Upvotes: 6

Views: 22685

Answers (4)

Sachindra
Sachindra

Reputation: 2092

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

Upvotes: 13

roneo
roneo

Reputation: 1257

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.

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

Upvotes: 0

tocallaghan
tocallaghan

Reputation: 9562

Building on Sachindra's this jsfiddle illustrates how to do this in webkit (Chrome, Safari) browsers.

Incidentally Sachindra's class attribute in point 2 is spelled incorrectly, which threw me for a bit (shadow_slect -> shadow_select)

Upvotes: 5

Gerry
Gerry

Reputation: 11204

If you're using Compass you can grab the these mixins https://gist.github.com/2919841 and then use them as like so:

@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.

Upvotes: 1

Related Questions