Kutu Seçme Twitter'da Glow Mavi Bootstrap

Question

Twitter Bootstrap 2.0 kullanıyorum ve seçtiğim kutuları değiştirmeyi düşünüyordum, böylece metin kutuları ve diğer form öğelerinin yaptığı harika mavi parıltıya sahipler.

Şu anda sahip olduğum form öğelerinin tümü, seçili kutular dışında, odaklama yapıldığında mavi renktedir. http://twitter.github.com/​bootstrap/base-css.html#forms'da bile, seçtiğim kutulara odaklandıklarında turuncu renkte parıldadığını fark ettim, bu yüzden henüz inşa edilmemiş olabilir. Bununla başa çıkmak zorunda olan biri var mı, yoksa nasıl düzeltileceğini biliyor mu? Teşekkür ederim!

Answer 1

1)) dosyasını

.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 bootstrap.css Sonra seçme etiketleri

Bu webkit hariç diğer tüm tarayıcılarda çalışır

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

için shadow_select sınıfı uygulamak için aşağıdaki satırları ekleyin. webkit wrap için div kullanarak seçin. Ardından, select'teki odak etkinliğini tespit etmek ve CSS shadow sınıfını bu div'e uygulamak için jquery'yi kullanın. Odak olay bir div uygulanamaz olabileceğinden (

Answer 2

sen Pusula kullanıyorsanız bu katmalar https://gist.github.com/2919841 kapmak ve sonra şöyle olarak kullanabilirsiniz:

@import "compass-bootstrap-box-shadow" 

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

Ben yepyeni değilim Eğer herhangi bir yenilik varsa Sass ve Compass, bu yüzden bana bildirin çekinmeyin.

Answer 3

Bina Sachindra en bu jsfiddle webkit (Chrome, Safari) tarayıcılar içinde bunun nasıl göstermektedir üzerinde.

Tesadüfen Sachindra'nın point özniteliği 2 noktasında yanlış yazılmıştır, bu da beni biraz fırlatmıştır (shadow_slect -> shadow_select)

Answer 4

Sachindra'nın yanıtını yukarıda kullanıyorsanız, webkit veya diğer modern tarayıcılarda düzgün çalışmayabilir. Bunun için, bu iki etiketi ".shadow-select: focus" öğesine eklemeniz yeterlidir. Bu benim için çalıştı.

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