Drop-down arrows in the select fields are not showing

3 Views

I am using a WordPress theme, and for some reason the HTML select elements look like plain input fields; although, when you click on them you can see the drop-down list.

I cannot find what code might be stripping away the drop-down arrows.

Read More

The following is what I can see in the CSS. 

input:focus {
outline: none;
}

select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0; 
border-radius: 0; 
}
Post Views: 3

Related posts

8 comments

  1. The following is a basic select element with its options.

    <select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

    Now let’s see where your issue is:

    select {
  /*webkit browsers */
  -webkit-appearance: none;
  /*Firefox */
  -moz-appearance: none;
  /* modern browsers */
  appearance: none;
  border-radius: 0;

}
    <select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

    When you set none to appearance you are removing the arrow, and when you set 0 to border-radius you are removing the border of the select by default.

    You can restore the arrow by setting the appearance to menulist (i.e., the default value) or listbox or auto.

    NB: If you have hidden the arrow in IE with this rule select::-ms-expand { display: none; }, then you would need to set it to display: block to get the arrow back.

  2. You have overridden the -webkit-appearance property for select, of which its default value is set as -webkit-appearance: menulist; by many browsers.

  3. I know I’m answering this question late, but my following CSS solution worked for me.

    It may be helpful for someone else.

    select {
-webkit-appearance: listbox !important;
}

  4. You can wrap the select in a div and on that div you can give ::after element and style: 

    div:after{
    position: absolute;
    top: 4px;
    right: 10px;
    color: #768093;
    font-family: #whichever font you wanna use# e.g Fontawesome;
    font-size: 20px;
    content: "e842";
}

div:after{ 
    position: absolute;
    visibility: visible;
    font-family: FontAwesome;
    content: "f096";
    font-size: 18px;
}

  5. The chosen answer is correct for most, but it didn’t work for me. However, the following line of code did the trick.

    select::-ms-expand { display: block; }

  6. I have tried above solutions but it was not working for UI, which was created using jquery.min.css. I have tried below css and it resolved my issue. Here I am targeting .ui-icon-carat-d, which shown dropdown arrow and setting dropdown icon there:

    .ui-icon-carat-d:after{
    background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
}

  7. I was too getting the same issue, have got the drop down arrow after adding the below jquery file jquery-3.4.1.js

    <script type="text/javascript" src="~/Scripts/jquery-3.4.1.js">


  8. select {
  -webkit-appearance: none;
  /*webkit browsers */
  -moz-appearance: none;
  /*Firefox */
  appearance: none;
  /* modern browsers */
  border-radius: 0;

}
    <select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Comments are closed.