Twitter Bootstrap Select Arrow Missing

Twitter Bootstrap Select Arrow Missing

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.

bootstrap select option dropdown down arrow not showing

Hi i trying to reproduce this issue with your sample code.

But i not faced any specified arrow missing issue in the result.

.form-control {

display: block;

width: 100%;

height: 34px;

padding: 6px 12px;

font-size: 14px;

line-height: 1.42857143;

color: #555;

background-color: #fff;

background-image: none;

border: 1px solid #ccc;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;

-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

<select class="form-control" onchange="location = this.value;">

            <option>Select a Generic Name</option>

            <option value="1">Title 1</option>

            <option value="2">Title 2</option>

 </select>

How to remove the arrow in dropdown in Bootstrap 4?

Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks to me the simplest solution.

Edit: Keep dropdown class if you want to keep border styling

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

Why isn't my dropdown input arrow showing?

After OP Edit:

The icon's showing on the Bootstap example page are part of the custom forms.

You'll need the custom-select class to enable those;

<select required class="custom-select form-control input-dropdown" id="serviceCategorySelection">

Updated CodePen

---

Before OP Edit:

You'll need to load Bootstrap's css file.

---

The easiest way is to use a CDN link;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

---

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="form-group">
  <select required class="form-control input-dropdown" id="serviceRegion">
    <option>Región</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Bootstrap menu dropdown not showing dropdown arrow on load

Add aria-expanded="false" to

<a href="#pageSubmenu" data-toggle="collapse">Files</a>

So it will be

<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Files</a>

This will maintain your current css

---

Related Topics