orange circle type="radio"

how can i change the styles for input type="radio"?

[pavel88]

how can i change the styles for input type="radio"?
i should orange circle and blue tittle for all <input class="radio" type="radio" />.

i can't use:
.radio {
border-color: orange;
border-width: 1px;
...
}

please help me :).

thanks all, pavel

[Setek]

Well, form controls are one of those things you just... have to live with :)

Changing the styles of forms rarely works cross-browser, and I believe the stance by the W3C on this was "these are the styles available for form controls, however, it's up to the agent whether or not to apply them."

The reason for this was consistency, or a programming theory called "The Path of Least Astonishment." Or, to be a little more descriptive and colloquial, "we're going to keep it looking the same as every other interactive element so that we don't confuse people."

This basically means that the interactive controls such as selections, radio button choices, and input boxes, all look the same for each operating system individually, and it's up to the browser whether to keep that consistency going so that users can easily understand what is an interactive control and what isn't (if you'll notice, Safari will never style the form controls, keeping them exactly the same as the operating system's forms.)

Having said that, some simple styling here and there on form controls is good. But you can't be disappointed when it doesn't work :)

P.S.: You won't be able to change the circle of the bullet itself through the property

border

, but you might be able to if you replace the background image of the

input

itself :) Give it a go, who knows :)