2012-07-02 2 views
10

Wenn Dropdown geöffnet ist - ich möchte die Standardfarbe davon ändern. Ich möchte Randfarbe und Hintergrund mit CSS ändern. Wie ändert man die Farbe des geöffneten Bootstrap Dropdown-Schalters?

enter image description here

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

ist hier HTML-Code:

<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> 

Mein css, dass ich versuche:

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

Wo ist Problem in meinen Wählern?

+0

Ich bin verwirrt, aber 'Drop-Down-toggle' verweist auf einen' a'-Tag, aber der Drop-Down-Inhalt selbst außerhalb des in dem 'ul ist vielleicht. Dropdown-Menüelement? –

+0

Ja, Dropdown-Schalter dient nur zum Öffnen des Dropdown-Menüs. - http://twitter.github.com/bootstrap/components.html#navs – skrypalyk

+0

Richtig; schau dir deinen Selektor an: '.menu .nav-pills .dropdown .open .dropdown-toggle' Sollte das nicht' .menu .nav-pills .dropdown .dropdown-menu' sein? –

Antwort

1

Hier ist Ihr Problem:

#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 existiert nicht in der Elementkette.

Und hier ist Ihre Geige mit der Grenze (die die .open beide hatten und keine border-style oder border-width zu Stil):

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

+0

Ich möchte Sie noch eine Frage stellen - wie kann ich die Auswahlliste so aussehen lassen wie diese Dropdowns? Ist es möglich, Nav-Pillen nur in ausgewählten Listen zu verwenden? – skrypalyk

+0

Sie müssen nur diese Elemente zielen: http://jsfiddle.net/userdu/bdCMU/5/ –

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

Verwenden Sie diese Klasse, wenn Sie die neueste Version verwenden von Bootstrap.

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

Es löst mein Problem, vielleicht wird es Ihnen helfen.

+1

funktioniert immer noch mit bootstrap 3.3.6 –

+0

es hat mir geholfen, danke! – brainvision

-1

Dies funktionierte für mich auch:

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