current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -2 down vote favorite

This question already has an answer here:

I wish to know why can't we style a select menu(not a dropdown menu) using CSS alone like we can style buttons or checkboxes. I have come across many articles that have styled them but they used Javascript manily to imitate the select behavior in their <ul>...<li> methods. I have tried but all I could do was style the select and not the option.

I am looking for a CSS method only. Regards.

share|improve this question

marked as duplicate by rink.attendant.6, kapa, FelipeAls, Mike Two, Maroun Maroun Mar 2 '14 at 12:22

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
    
seems to work fine here: jsfiddle.net/zmJwN/1 How exactly are you trying to style the <option> tags? –  Dryden Long Aug 23 '13 at 16:36
    
The ability to style form controls is exceptionally limited. –  cimmanon Aug 23 '13 at 16:49
    
@DrydenLong, I hope you understand the meaning of my question and what customizing the select meant in the question. i.imgur.com/apMZ2N0.png?1 This is what i wish to achieve. –  Anuj Kaithwas Aug 23 '13 at 17:13
1  
why the downvote? this is a legit and a reasonable question. –  Anuj Kaithwas Aug 23 '13 at 17:14
2  
i don't understand why downvote, that's a legit question. –  user652649 Aug 24 '13 at 3:29

4 Answers 4

up vote 3 down vote accepted

I wish to know why can't we style a select

HTML 4.01 (or is it CSS 2.1?) let User Agents style form elements the way they want. So there has been little standardisation and when you filed a bug in the bugzilla of WebKit (mostly), the answer was something like "Show me which part of the Recommendation is buggily implemented in my rendering engine. None? OK WONTFIX KTHXBYE".
To be fair, 3 vendors have 3 OS and 3 UI to consider, Apple had 2 and now 1 and the 5th had more important problems to solve.

Here's the state of the art from 2007: Styling form controls with CSS, revisited (R. Johansson). As far as WebKit may annoy me, I don't regret that time! (except Safari 2: "we can't do anything" was an answer easily understood by clients, more easily than "Yes but not everything... This and that, etc")

So no padding in WebKit afaik and if you really really need a very custom look everywhere, than go for custom lists and WAI ARIA to mimick native elements.

EDIT: this article is a very good summary: The Problem Of CSS Form Elements (Smashing Magazine, Gabriele Romanato)

MDN article seems outdated. I'll have to do further tests but legend can be floated in IE8+. What's written is true for IE7 and IE6 though. Absolute positioning (and a known width) was the only way to position it in these browsers.

share|improve this answer
    
edit: added a link to a good summary. I couldn't emphasize enough on the importance of vertical-align: middle to align a label and a form element cross-browser. Otherwise, you're going to have a bad time –  FelipeAls Aug 24 '13 at 11:39
up vote 2 down vote

Simply put, you won't find a cross-browser CSS-only method, because one doesn't exist.

The reason one doesn't exist, and why select controls differ from other HTML elements, is because they (and other form controls) are OS-level elements. That is, the browser leaves it up to the OS to determine the style of the elements. This was done in part because every operating system has its own form styles, and the standards groups chose to keep that consistent on a platform basis (makes them recognizable to the user as a form). As such, there's little, if any, CSS available that the controls will actually heed, let alone anything that is actually cross-browser.

In other words, you're stuck with the JavaScript methods that you've found if you want more than basic text size and color, margin, or padding in pretty much any form input element.

share|improve this answer
    
you just said that selects are styled by the OS's UI rendering style. So are the other controls, I am sorry if i am not getting you, but I don't yet understand why we can style other form elements and not select. "The reason one doesn't exist, and why select controls differ from other HTML elements, is because they (and other form controls) are OS-level elements. That is, the browser leaves it up to the OS to determine the style of the elements." That's what I said, do you mean that selects where left out while deciding what could be customized and what can't be? –  Anuj Kaithwas Aug 24 '13 at 3:01
up vote -1 down vote 
<style name='abc'>
<option name='a' style='color: red; background-color: #fff;'>Hello</option>
</style>

In this way you can add more styling properties to style tag.

share|improve this answer
up vote -2 down vote

You can add various properties of css to this style tag.

share|improve this answer
    
You need to properly format your code so that it appears in your answer. Also, your answer addresses styling the select box itself, not the <option> tag as the OP asked for. –  Dryden Long Aug 23 '13 at 16:44
    
hey i am new here i added jsfiddle link but when i submit my answer i didnt see the link...can u please teach me about that?Thanks in advance. –  Laksh Aug 23 '13 at 16:57
1  
When typing your answer, there is a little orange icon with a question mark in it. Click on that to get all the help you need. –  Dryden Long Aug 23 '13 at 17:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.