Create dedicated Glow Blue boxes on Twitter Bootstrap

Question

I am using Twitter Bootstrap 2.0, and I was wondering how to change the selection box so that they have the same strong shine as text fields and other form elements.

At the moment, all the form elements that I have are blue when focus is applied to them, except for the selection fields. I noticed that even at http://twitter.github.com/bootstrap/base-css.html # forms , when I focused on the select boxes, they glow in orange, so maybe it's not built yet. Did anyone else have to handle this or know how to fix it? Thanks!

Answer 1

1) Add the following lines to the 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 the shadow_select class to your favorite tags

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

This works in all other browsers except webkit. for webkit wrap select using div. Then use jquery to determine the focal event when selecting and applying the CSS shadow class to this div. (Since the focus event cannot be applied to the div

Answer 2

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

By the way, the attribute of the Sachindra class in paragraph 2 is incorrectly specified, which cast me a little (shadow_slect → shadow_select)

Answer 3

If you use Compass, you can grab these mixes https://gist.github.com/2919841 and then use them like this:

 @import "compass-bootstrap-box-shadow" shadow_select @include bs-box-shadow &:focus, &:hover @include bs-box-shadow-focus 

I am new to Sass and Compass, so if you have any improvements, please feel free to let me know.

Answer 4

If you use the Sachindra answer above, it may not work correctly in webkit or other modern browsers. To do this, you just need to include these two tags in the ".shadow-select: focus" element. It worked for me.

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