phpcsswordpresstwitter-bootstrapdrop-down-menu

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?


Solution

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