Twitter Bootstrap Select Arrow Missing

Question

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

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

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

Answer 1

I have experienced that behavior with IE on Windows 8.1. For some reason IE renders the arrow differently as soon as you start to style the select element (which bootstrap themes usually do). Even something as simple as setting the background color triggers this behavior.

The only solution I've found so far is to style the arrow as needed. You can use the ::-ms-expand pseudo element for that. The following css rule should restore the "default" look:

select::-ms-expand {
  background-color: #fff;
  border: none;
}

Answer 2

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

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.

Answer 3

Use for select

select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}

Answer 4

You can't style the <select> element itself at this moment. Every browser applies its own styling to most form elements.

So you can create your own custom select by hiding the original one, create markup, e.g. div with ul + li and live it up with javascript.

OR

If you don't mind using jQuery, try these libraries:

• SelectBoxIt
• Select2
• Chosen
• Bootstrap select
• jquery-selectBox
• jQuery UI