'bootstrap select option dropdown down arrow not showing

I use bootstrap select option field with class form-control

Here is my code: 

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

But in dropdown option down arrow icon not displaying

See Image

CSS: 

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

What is the main problem to displaying this icon?

phpcsswordpresstwitter-bootstrapdrop-down-menu


Solution 1:[1]

If you are using Bootstrap v5 the tag has changed to

<select class="form-select">

Solution 2:[2]

I was facing the same issue with the bootstrap-select field. here is a simple class that definitely solves the problem.

Add form-select class next to the form-control class.

<select class="form-control form-select">
    <option>Select a Generic Name</option>
    <option value="1">Title 1</option>
    <option value="2">Title 2</option>
 </select>

Solution 3:[3]

It worked for me using the following way: (The following edit fixed the issue in Chrome )

select.form-control { -webkit-appearance: menulist; }

Solution 4:[4]

I was facing the same issue with the bootstrap-select field. here is a simple class that definitely solves the problem.

Add custom-select class next to the form-control class.

  <select class="form-control custom-select">
        <option>Select a Generic Name</option>
        <option value="1">Title 1</option>
        <option value="2">Title 2</option>
     </select>

It will display an arrow notation, which may differ in look according to the browser and OS you are using.

Solution 5:[5]

Elements with "form-control" class are having an "appearance" property set to 'none' by default. So if you want to display caret(dropdown symbol) for select tag in bootstrap, you have to override BOOTSTRAP styles with below css.

select.form-control{
    -webkit-appearance: menulist!important;
    -moz-appearance: menulist!important;
    -ms-appearance: menulist!important;
    -o-appearance: menulist!important;
    appearance: menulist!important;
}
<!--CDNs of External Libraries to load bootstrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!--Select Tag in html-->
<select class="form-control">
  <option value="">Select Option</option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
  <option value="Option 5">Option 5</option>
</select>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dejan S
Solution 2 Oahid Zihad
Solution 3 Tiago Lopes
Solution 4 Sayed Hussainullah Sadat
Solution 5

Related Questions