Twitter Bootstrap Select Arrow Missing

August 31, 2022 Post a Comment

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 restr

Solution 1:

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.

Solution 2:

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

Solution 3:

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.

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

Solution 4:

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

Solution 5:

I found a solution to this, add this CSS and put 'form-override' class on each select dropdown:

.form-override {
  appearance: auto !important;
}

I'm not sure why this works or why it's needed, just wanted to share how I was able to fix this problem. For me it seems to be sporadic, sometimes the problem occurs and I need this style setting to fix it, and sometimes it does not need this fix.

Html5 Manual