Menu
I'm working with twitter bootstrap 2.0.1
I'm trying to change the color of the dropdown-menu.
I have managed to change the color of the container that is comming down itself, however I can't seem the find where the arrow is comming from.
Anyone know where I can find the code where the arrow comes from (and how to change it's color)?
737
If you want to change the select dropdown arrow color in CSS, you can use the ::after selector. This will allow you to change the color of the arrow without affecting the rest of the element. You can also use the :hover selector to change the color of the arrow when the user hovers over the element.
There is no special pseudo elements for select dropdown icon in css. But you can change the position of the icon by background property. Or else use this kind of "height" or "line-height" for good look.
This is happening because may be you don't have space on your screen below the dropdown when you select first time. When you select first item, it shows the pannel below it with makes more space available below your dropdown and that is why in second time your dropdown opens downward.
The arrow code can be found on line:2690 of the bootstrap.css. You can manipulate its position and color by modifying its css, e.g.:
.navbar .dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #000; /* change color here, modified for a black arrow */
position: absolute;
top: -6px;
left: 10px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
