Continuing with the quiz, I thought I’d ask a corollary to the first form quiz question since this question deals with radio buttons as well.
How do you think browsers should render radio buttons when a value for background-color
is applied?
Pick your answer from the sample answers (which are taken from actual browser renderings) or suggest your own solution!
A. Background color is applied around the radio button control.
B. Background color is applied inside the radio button control.
C. Nothing happens.
B! [some might say C, but not often my clients or designers if they have a say in the matter, so lets make it an option and do it properly]
And borders… borders should either be applied to the circle as a circle or ignored … none of this draw a square around the circle nonsense.
I wanted to go with A, because it makes most sense to not tamper with OS-specific UI elements and just treat them as they are, considering the background to be whatever is not the radio button itself. However, if you look at background-color on an input element, stuff pretty much behaves like B, and here it makes most sense.
This just proves that user interface guidelines are necessary and a major part of the success of any given environment but they never ever make complete sense.
B is the most straightforward interpretation of streamlining the style of all web form elements, as background-color normally applies to the background inside the element, not outside of it like A.
Firefox © probably thought “whoah this is not really consistent anywhere, let’s open sourcily back away.”
Tough one to call… in my heart, I’d like it to be “B”, but I know that’s unlikely.
As a second suggestion, if “B” would be the ideal option, then the “color” definition should also be applicable to the the center dot.
I’d like to ask you to read my answer to the previous question before reading on as I explained some of the things I’ll be mentioning again there: http://www.christopherschmitt.com/2009/04/26/web-form-elements-design-quiz-part-1-radio-buttons-and-width-property/#comment-128958
I have to go with B, the area coloured there is the only correct background for the radio button it self. However C is right in many other cases. I think it’s funny you did not show any other Mac browser because that would have illustrated my point.
Now all 3 shown radio buttons are created by the browser and not by the OS. As I said in my previous comment these radio buttons are adapted for websites to use and therefore CSS should always be applied to them. Only when the element was not created for use on the web you have a valid reason not to apply CSS.