2012-07-02 3 views
10

Khi thả xuống được mở - Tôi muốn thay đổi màu mặc định của nó. Tôi muốn thay đổi màu đường viền và nền bằng cách sử dụng css.Làm thế nào để thay đổi màu sắc của khởi động chuyển đổi thả xuống Bootstrap?

enter image description here

http://i.imgur.com/w6WIN.png

Đây là mã html:

<div class="row menu"> 
<ul class="nav nav-pills pull-right"> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" 
     data-toggle="dropdown"> 
     My reports 
     <span class="caret my-reports-caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><%= link_to "Performance", performance_reports_path %></li> 
     <li class="divider"></li> 
     <li><%= link_to "Account settings", '#' %></li> 
    </ul> 
    </li> 
</ul> 
</div> 

My css, rằng tôi đã cố gắng:

.menu .nav-pills .dropdown .open .dropdown-toggle{ 
    background-color: red; 
} 

đâu phải là vấn đề trong bộ chọn của tôi?

+0

Có lẽ tôi đang bối rối, nhưng 'điểm thả xuống-toggle' đến một 'a' thẻ, nhưng nội dung thả xuống chính nó là bên ngoài mà trong' ul. phần tử menu thả xuống? –

+0

có, thả xuống-chuyển đổi chỉ dành cho việc mở menu thả xuống. - http://twitter.github.com/bootstrap/components.html#navs – skrypalyk

+0

Phải; nhìn vào bộ chọn của bạn: '.menu .nav-pills .dropdown .open .dropdown-toggle' Không phải là' .menu .nav-pills .dropdown .dropdown-menu'? –

Trả lời

1

Đây là vấn đề của bạn:

#original.menu .nav-pills .dropdown .open .dropdown-toggle { 
    border: 1px solid blue; 
} 

#suggested.menu .nav-pills .dropdown .dropdown-toggle { 
    border: 1px solid red; 
} 

http://jsfiddle.net/userdude/mjbN7/

.open không tồn tại trong chuỗi phần tử.

Và đây là fiddle với biên giới (trong đó có cả .open và không border-style hoặc border-width phong cách):

http://jsfiddle.net/userdude/bdCMU/4/

+0

Tôi muốn hỏi bạn thêm một lần nữa - làm thế nào tôi có thể làm cho danh sách lựa chọn trông giống như danh sách thả xuống này? Có thể chỉ để sử dụng thuốc nav trong danh sách lựa chọn? – skrypalyk

+0

Bạn chỉ cần nhắm mục tiêu các yếu tố đó: http://jsfiddle.net/userdude/bdCMU/5/ –

0
.nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover { 
    background-color:#222; 
    border-color: #333; 
    } 
34

Sử dụng lớp này nếu bạn đang sử dụng phiên bản mới nhất của Bootstrap.

.dropdown-toggle:active, .open .dropdown-toggle { 
     background:#FFF !important; 
     color:#000 !important; 
    } 

Nó giải quyết được vấn đề của tôi, có thể nó sẽ giúp bạn.

+1

vẫn hoạt động với bootstrap 3.3.6 –

+0

nó đã giúp tôi, cảm ơn! – brainvision

-1

này đã làm việc cho tôi, quá:

.dropdown-toggle[aria-expanded="true"] { 
    background:#FFF !important; 
    color:#000 !important; 
}