html dropdownlist with custom style

Question

How can I completely change the design of a element? i am trying to make drop down like following image, what i wrote is

<select>
 <option value="0">Title</option>
  <option value="1">Mrs</option>
  <option value="2">Mr</option>
</select>

i am stuck at put custom image to open drop down list for dropdown and also how to style select element

enter image description here

Be carefull about browser compatibility when doing that. You might want to take a look at twitter.github.com/bootstrap/components.html#buttonDropdowns — Benjamin Crouzier
– Benjamin Crouzier, Commented Jan 29, 2013 at 10:45

Billy Moat · Accepted Answer · 2013-01-29 10:49:33Z

1

Some form elements are notoriously hard to style with CSS alone and still appear visually the same across all browsers.

The recommended practice for styling SELECT elemets is generally to use a javascript solution as this will work cross-browser.

answered Jan 29, 2013 at 10:49

Billy Moat

21.1k7 gold badges47 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua · Accepted Answer · 2013-01-29 10:51:12Z

1

You can't style elements such as select in such a way you described it. Things like background-color or border are possible.

Styling with CSS only could go as far like this:

select {
    border-radius: 5px;
    color: lightgrey;
    font-weight: bold;
}

With this CSS you will have the round corners and the font changed.

What's not possible:

Try fiddling with javascript, nested divs and a hidden input field. Also a glance at http://jqueryui.com could help you quite much.

answered Jan 29, 2013 at 10:51

Joshua

2,9922 gold badges27 silver badges40 bronze badges