CODEWITHSUNDEEP
htmlcsswordpressdrop-down-menu
JA4677
JA4677

Reputation: 561

Drop-down arrows in the select fields are not showing

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.

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

Upvotes: 41

Views: 137515

Answers (9)

DXB-DEV
DXB-DEV

Reputation: 579

Please try the following CSS code:

#dropdownContainer {
    position: relative;
}

#dropdownContainer:after {
    position: absolute;
    top: 4px;
    right: 4px;
    
    font-size: 18px;
    content: "\2B9F";
    color: #768093;
}

And the HTML code:

<div id="dropdownContainer">
     <?php
            $attributes = 'class="form-control rounded-0" id="category_id" required';
            echo form_dropdown('category_id', $categories, set_value('category_id'), $attributes); 
     ?>
</div>

I am using codeigniter to generate the select field.

Upvotes: 0

dsaket
dsaket

Reputation: 1896

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

Upvotes: 19

fran
fran

Reputation: 326

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

Upvotes: 2

Vishal Kumar
Vishal Kumar

Reputation: 181

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

Upvotes: 16

dippas
dippas

Reputation: 60563

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.

Upvotes: 51

Smita
Smita

Reputation: 1

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

Upvotes: 0

Chandrajeet Shukla
Chandrajeet Shukla

Reputation: 1

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>

Upvotes: -6

Gauri Bhosle
Gauri Bhosle

Reputation: 5473

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

Upvotes: 1

Shubham Yadav
Shubham Yadav

Reputation: 63

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

Upvotes: 3

Related Questions