1

Possible Duplicate:
How to make a custom select option menu style without image in CSS?

Is it possible to customise the look of HTML select option menus aswell as its attached button and how do you do so it if it is?

For example I have a menu that looks like this

<select id="music" title="Music Genres">
<option>Ambient</option>
<option>Acoustic</option>
<option>Alternative</option>
<option>Beat</option>
<option>Break</option>
<option>Bass</option>
</select>

but I need to make it look like the rest of my website and not its default design

I found this video tutorial on Youtube that tells you a way of how it can be done (sort of) http://www.youtube.com/watch?v=jzvRue8pS-U

Community
  • 1
  • 1
Hellodan
  • 1,158
  • 4
  • 18
  • 38

4 Answers4

2

It's very hard to style <select> tags properly as different browsers/operating systems render them differently.

You can build a select box-type control using JavaScript and, if you're using jQuery, there are plenty of plugins to do just that, like this one. Googling jquery select box should get you started.

Of course it's possible to do without jQuery, but more difficult. At the end of the day: Styling <select> tags is very unreliable. While very basic properties are supported, most CSS properties are not.

Bojangles
  • 99,427
  • 50
  • 170
  • 208
0

This really depends on what you want to do. You're able to modify it and its members like any other web site element, however there are some limitations based on browser and operating system (e.g. it will always be some kind of list).

So you could do any of the following:

<select id="music" title="Music Genres" style="background-color: #c0c0c0; color: #000000">
<option style="font-weight: bold">Ambient</option>
<option class="some-css-class">Acoustic</option>
</select>
Mario
  • 35,726
  • 5
  • 62
  • 78
0

As above, different browsers have different support for styling form elements; the visual style of them is dictated by the operating system.

Theoretically, from a convention point of view you shouldn't style form elements as it's part of the browser UI.

Martin Bean
  • 38,379
  • 25
  • 128
  • 201
0

Taken from a comment in a previous question similar:

CSS / HTML - Styling select boxes properly

select elements will only accept very limited CSS, as they're rendered by the OS, not the browser itself. You can emulate a select by using a styled ul (or ol), and some JavaScript; but styling the select element itself is near impossible to achieve reliably. Read this question for some pointers on the JavaScript approach (albeit with jQuery rather than plain JS): Html Select box options on Hover?

With that said you can use simple CSS to an extent but each browser will render them slightly differently with its output (background, border, font properties etc - the same as most CSS properties/values). As others have stated you can use jQuery/Javascript to handle them but people have different views on if this is good practice or not. There is an example on the question linked to above.

Community
  • 1
  • 1
no.
  • 2,356
  • 3
  • 27
  • 42