CODEWITHSUNDEEP
htmlcss
ALAN
ALAN

Reputation: 495

html dropdownlist with custom style

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

Upvotes: 2

Views: 6496

Answers (2)

Joshua
Joshua

Reputation: 2982

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:

  • Change the icon
  • Change the background or font of the dropped down box

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

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

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.

Have a look at Chris Coyle's article on this: http://css-tricks.com/dropdown-default-styling/

Upvotes: 1

Related Questions