Tạo Chọn Hộp Glow Blue trong Twitter Bootstrap

Question

Tôi đang sử dụng Twitter Bootstrap 2.0 và tôi đã tự hỏi làm thế nào để thay đổi các hộp chọn để chúng có cùng màu xanh rực rỡ mà hộp văn bản và các phần tử biểu mẫu khác làm.

Ngay bây giờ tất cả các phần tử biểu mẫu tôi có màu xanh khi lấy nét được đặt lên chúng, ngoại trừ các hộp chọn. Tôi nhận thấy rằng ngay cả trên http://twitter.github.com/​bootstrap/base-css.html#forms khi tôi tập trung vào các hộp chọn, chúng phát sáng màu da cam, vì vậy có thể nó chưa được xây dựng. Có ai khác phải đối phó với điều này, hoặc biết làm thế nào để sửa chữa nó? Cảm ơn bạn!

Answer 1

1) Thêm dòng sau vào tập tin bootstrap.css

.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) Sau đó, áp dụng lớp shadow_select cho chọn thẻ

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

này hoạt động trên tất cả các trình duyệt khác, ngoại trừ webkit. cho gói webkit chọn sử dụng div. Sau đó sử dụng jquery để phát hiện sự kiện tập trung vào chọn và áp dụng lớp bóng CSS cho div đó. (Bởi vì sự kiện trọng tâm không thể được áp dụng cho một div

Answer 2

Nếu bạn đang sử dụng Compass bạn có thể lấy những mixins https://gist.github.com/2919841 và sau đó sử dụng chúng như như vậy:

@import "compass-bootstrap-box-shadow" 

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

Tôi hoàn toàn mới để Sass và Compass, vì vậy nếu bạn có bất cứ cải tiến xin vui lòng đừng ngần ngại cho tôi biết.

Answer 3

xây dựng trên Sachindra của jsfiddle này minh họa làm thế nào để làm điều này trong webkit (Chrome, Safari) trình duyệt.

Ngẫu nhiên, thuộc tính lớp của Sachindra ở điểm 2 được viết không chính xác, điều này đã ném tôi một chút (shadow_slect -> shadow_select)

Answer 4

Nếu bạn đang sử dụng câu trả lời của Sachindra ở trên, nó có thể không hoạt động chính xác trong webkit hoặc các trình duyệt hiện đại khác. Vì bạn chỉ cần bao gồm hai thẻ này trong phần tử ".shadow-select: focus". Điều này làm việc cho tôi.

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