Drop down arrow in select boxes not showing

Question

I am using a wordpress theme and for some reason, the HTML select boxes do not have the drop down area. They look like just plain input text boxes, although when you click on them, you can see the drop down list. I can't find what code might be stripping away the drop down arrows.

This is all I see in the CSS:

input:focus { outline: none; }  select, input, textarea { -webkit-appearance: none; -webkit-border-radius:0;  border-radius:0;  } 

Answer 1

Here is a basic select

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

Now lets see where is your issue:

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>

So when you set none to appearance you are removing the arrow (which by default is menulist), and when you are setting 0 to border-radius, you are removing the border by default of the select.

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

Answer 2

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