Wybieranie skrzynek Glow Blue na Twitterze Bootstrap

Question

Używam Twittera Bootstrap 2.0 i zastanawiałem się, jak zmienić wybrane ramki, aby miały ten sam wspaniały niebieski blask, jaki mają pola tekstowe i inne elementy formularzy.

W tej chwili wszystkie elementy formularza, które mam, są niebieskie, gdy fokus zostanie na nich ustawiony, z wyjątkiem pól wyboru. Zauważyłem, że nawet na http://twitter.github.com/​bootstrap/base-css.html#forms, kiedy skupiam się na wybranych polach, świecą na pomarańczowo, więc może nie jest jeszcze wbudowany. Czy ktoś inny musiał sobie z tym poradzić, czy wiedział, jak to naprawić? Dziękuję Ci!

Answer 1

1) Dodaj poniższe linie do bootstrap.css plikowi

.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) Następnie zastosować klasę shadow_select dla wybranych tagów

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

To działa na wszystkich innych przeglądarkach z wyjątkiem WebKit. dla wrapingu webkit wybierz używając div. Następnie użyj jquery, aby wykryć fokus na wybranym i zastosuj klasę CSS shadow do tego div. (Ponieważ zdarzenie ostrości nie może być stosowana do div

Answer 2

Jeśli używasz kompasu można chwycić tych wstawek https://gist.github.com/2919841 a następnie wykorzystać je jako tak:

@import "compass-bootstrap-box-shadow" 

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

jestem nowy do Sass i Compass, więc jeśli masz jakieś ulepszenia proszę nie wahaj się dać mi znać.

Answer 3

Building na Sachindra ta jsfiddle pokazuje, jak to zrobić w WebKit (Chrome, Safari) przeglądarki.

Nawiasem mówiąc, atrybut klasy Sachindry w punkcie 2 jest niepoprawnie zapisany, co rzuciło mnie na chwilę (shadow_slect -> shadow_select)

Answer 4

Jeśli używasz powyższej odpowiedzi Sachindry, może nie działać poprawnie w webkicie lub innych nowoczesnych przeglądarkach. W tym celu wystarczy dołączyć te dwa znaczniki w elemencie ".shadow-select: focus". To działało dla mnie.

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