Search code examples
htmlcssresponsive-design

Select arrow do not appear on iphone

Looking for a solution for a problem I'm having.

I am making a responsive website that has a select tag to allow users to pick which category of blog posts they want to display the html is just a basic select tag.

<select name="">
    <option value="">Sort by Category</option>
    <option value="">test</option>
    <option value="">Test</option>
</select>

I then have styled the select tag with the following code

.portfolio-thumbs select {
    width:100%;
    padding:0.625em;
    border:none;
    background:#33c3e2;
    color:#fff; 
    font-size:1.125em;
 }

select {
    -webkit-appearance: none;
    border-radius: 0;
}

This works fine on Windows phone but on Iphone, Blackberry and Android the arrow for the select box does not display. Has anyone encountered this problem before and know what i am doing in my CSS to disable the arrow from displaying or have a solution to get the arrow back whilst still being able to style the select how i want.

Solution

  • The -webkit-appearance: none; line is telling webkit browsers (iPhone, BB and 'droid) to not display the default <select> appearance. Removing this line will restore the arrow.

    As mentioned in the comments, <select> is a real pain to style. The only realistic option if you want real control of how it looks it to use a replacement technique as mentioned by @AdamMarshal.

    Alternatively, if you absolutely must use a <select> and -webkit-appearance: none;, add a background image of an arrow.