Les Buttons dropdowns dans la doc officielle de Bootstrap : http://getbootstrap.com/components/#btn-dropdowns.
Structure HTML; notez bien les emplacements des classes .open et .dropdown-toggle :
|
1 2 3 4 5 6 7 8 9 |
<div class="input-group-btn open"> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" aria-expanded="true"> Choisir <span class="caret"></span> </button> <ul role="menu" class="dropdown-menu"> <li><a href="#">Par défaut</a></li> [...] </ul> </div> |
Problème :
Le navigateur ne tient pas compte de mes surcharges CSS. Ce sont les styles standards de .btn-default qui prennent le pas sur la ré-écriture.
Remarque : le code ci-dessous utilise le caractère & comme alias de la classe .btn-default. Il s’agit d’une version LESS des styles Bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
:hover, &:focus, &.focus, &:active, &.active, .open > .dropdown-toggle& { text-decoration: none !important; color: @color !important; background-color: @background !important; border-color: @border !important; box-shadow: none; } |
Solution :
Le code CSS fourni avec Bootstrap est erroné : en regard du markup HTML énoncé plus haut, la classe .open n’existe pas dans la chaîne .open > .dropdown-toggle& (ou .open > .dropdown-toggle.btn-default). Le chemin correct serait &.dropdown-toggle.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
&:hover, &:focus, &.focus, &:active, &.active, &.dropdown-toggle { text-decoration: none !important; color: @color !important; background-color: @background !important; border-color: @border !important; box-shadow: none; } |