Twitter Bootstrap Select Arrow Missing

Issue

I’m having an issue with the select drop down button in twitter bootstrap. It’s happening in the two browsers I have installed on the machine (IE11, Chrome) and it’s not just restricted to ‘my sites’.

Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):

Example

I have checked the console window and all resources are loading correctly.

Could anyone help me with why this is happening / steps to resolve?

Solution

TL;DR: you can’t use CSS to change the icon. You’ll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).

The icon displayed in <select> is determined by the user’s browser or operating system. You can’t change it using CSS.

Select display in Chrome on a Mac:

Select display in Chrome on a Mac

Select display in Chrome on a Mac with some styles removed:

I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn’t change any related style.

Select display in Chrome on a Mac with some styles removed

Select display in Chrome on Windows:

Select display in Chrome on Windows

Notice that the icons are different, even though the code is the same.

Now what?

Although select isn’g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.

This library creates a <div class="caret"></div> that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:

HTML

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

CSS

.caret{
    color: red;
}

Gives me this display:

Bootstrap-select example image

You’ll lose mobile display, though:

Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.

enter image description here

Answered By – Joshua Dwire

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published