Twitter Bootstrap - Cách xóa Đường viền Màu xanh của Tùy chọn Chọn

Question

Bạn có thể xem this example và cho tôi biết cách tôi có thể loại bỏ đường viền màu xanh cho nút chọn thả xuống và hộp thư Tìm kiếm bên trong trình đơn thả xuống (hiển thị ở bên dưới hình ảnh)?

Tôi đã cố gắng:

.btn-default { 
    outline: none !important; 
    box-shadow: none !important; 
    background-color: transparent !important; 
    background-image: none !important; 
} 
input, textarea, select, a { outline: none !important; } 
input:focus, textarea:focus, select:focus{ outline: none; } 

nhưng họ không làm các trick!

Answer 1

Bootstrap yếu tố hình thức đầu vào không sử dụng outline bất động sản, mà đúng hơn là tái tạo nó bằng cách sử box-shadow. Bạn đã đi đúng hướng với những gì bạn đã làm, nhưng phong cách mà nguyên nhân này là như sau:

.form-control:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
} 

Bạn sẽ muốn ghi đè lên những phong cách riêng của bạn, thiết lập các box-shadow-none và điều chỉnh border-color để phù hợp với mặc định của bạn.

Đối với các hộp chọn, bạn có thể sử dụng phong cách sau đây, như ban đầu được đề cập bởi @ Kamlesh-kushwaha, để ghi đè lên các thiết lập bootstrap:

.bootstrap-select .btn:focus { 
    outline: none !important; 
} 

Answer 2

Thêm css focus quy tắc hoặc sửa đổi quy tắc hiện có.

.bootstrap-select .btn:focus{outline:none!important;} 

Tương tự như vậy, bạn có thể thêm cho select

Answer 3

Bạn có thể sử dụng input[type] {}

Tất cả bootstrap loại đầu vào như sau

textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus { 
    border-color: rgba(126, 239, 104, 0.8); 
    /* give your style */ 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6); 
    /* give your style */ 
    outline: 0 none; 
    /* give your style */ 
} 

select:focus { 
    outline-color: transparent; 
} 

Answer 4

Đối <select> thả xuống, sự thay đổi trong bootstrap-select.min dòng 29:

.bootstrap-select .dropdown-toggle:focus { 
    outline: thin dotted #333 !important; 
    outline: 5px auto -webkit-focus-ring-color !important; 
    outline-offset: -2px;} 

tới:

.bootstrap-select .dropdown-toggle:focus { 
    outline: none!important; 
}