CODEWITHSUNDEEP
phpcsswordpresstwitter-bootstrapdrop-down-menu
user11130345
user11130345

Reputation:

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?

Upvotes: 57

Views: 47890

Answers (7)

Olamigoke Philip
Olamigoke Philip

Reputation: 1137

The Bootstrap .form-control set the appearance prop to none. A simple one-liner CSS to fix this:

 appearance: auto !important;

Upvotes: 1

Oahid Zihad
Oahid Zihad

Reputation: 341

I was able to solve this issue by slightly modifying @Sayed Hussainullah Sadat's answer.

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>

Upvotes: 34

Sarath Gvnd
Sarath Gvnd

Reputation: 76

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>

Upvotes: 6

Tiago Lopes
Tiago Lopes

Reputation: 109

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

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

Upvotes: 10

Dejan S
Dejan S

Reputation: 1841

If you are using Bootstrap v5 the tag has changed to

<select class="form-select">

Upvotes: 147

Sayed Hussainullah Sadat
Sayed Hussainullah Sadat

Reputation: 338

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.

Upvotes: 2

krishna
krishna

Reputation: 76

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>

Note: Make sure the following css is not used for the select dropdown.

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

Hope it will helpful.

Upvotes: 2

Related Questions