Styling a drop down option list to look like a button with background image. HTML/CSS

Question

I am creating a mobile website, and I want to style a simple drop down list to look like a button. I want it to have a background image within the button.

Its purpose is to sort a list view, so I want the option menu to have a sort icon with text saying sort

<select>
  <option>ASC</option>
  <option>DESC</option>
  <option>Price</option>
</select>

Is this possible? I have seen it used on jQuery Mobile but we are NOT using this framework, just pure html/css.

Answer 1

There are ways to do this, but all require some JavaScript.

The simplest is to use this technique , which basically sets the select element to be transparent and positions it over your custom "button" element. When you click on the button you're really clicking on the transparent select element, which causes it to open.

Other, most complicated/powerful solutions include:

• Select2
• zelect

Answer 2

I wrote this for a custom Font project (dropdown) its very easy to use, and it has lots of application that you can use it for. There is no way to do what you are requesting at the option level (say for some color). Here is the link, I hope it is helpful.

http://jsfiddle.net/cornelas/mAz3c/

Common CSS

select option {
 background: red;
}

Answer 3

This might be hackish but maybe it's similar to what you're looking for. Just an example that you can do a dropdown without JS, numerous examples of it.

But you can throw whatever you need to in the "li" tags and style them appropriately.

Of course, with the positioning you'll need to be able to know where your stuff needs to go which could be a pain if you're going for something flexible across different viewports.

Styling would obviously need work too.

http://jsfiddle.net/uNhaX/

<ul>
    <li id="first"><img src="http://jsfiddle.net/img/logo.png" /><ul id="second">
        <li id="asc">Asc</li>
        <li id="desc">Desc</li>
        </ul>
    </li>
</ul>