Checkbox and Radio button in Opera browser

Browsers currently render form elements Checkbox and Radio button as images or icons. This way do not offer to much possibilities for styling. Opera browser introduced new way of rendering these elements and offer better styling by CSS. For example, to remove the borders of CheckBox and Radio button can be done only in browser Opera. This is a big challenge for all other browsers.

actual browser	screenshot Opera 10.5	{width: 21px; height: 21px; background: #fff; margin: 0;}
		style="color: #aaa; padding: 0;"
		style="color: #0a0; padding: 1px;"
		style="color: #f90; padding: 2px;"
		style="color: #f55; padding: 3px;"
setting size and color of check mark
actual browser	screenshot Opera 10.5	{width: 21px; height: 21px; background: #fff; margin: 0; padding: 2px;   color: #aaa;}
		style="border: 1px inset #aaa;"
		style="border: 1px solid #0c0;"
		style="border: 1px solid transparent; background: #eee;"
		style="border: 1px solid transparent;"
setting / removing of checkbox border
actual browser	screenshot Opera 10.5	{width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;}
		style="color: #f00;"
		style="color: #f90;"
		style="color: #0a0;"
setting colors in radio button
actual browser	screenshot Opera 10.5	{width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;}
		style="color: #f00; width: 17px; height: 17px;"
		style="color: #f90; width: 15px; height: 15px;"
		style="color: #0a0; width: 13px; height: 13px;"
setting size of radio button
actual browser	screenshot Opera 10.5	{width: 21px; height: 21px; background: #fff; margin: 0; padding: 0;   border: 1px solid transparent;}
		style="color: #f00;"
		style="color: #f90;"
		style="color: #0a0;"
borderless radio button

In every row of examples is on the left live form element as is displayed in your actual browser, followed by a screenshot of Opera 10.51, and finally applied CSS code. For each element is used group style (code in the group header) and inline style (code in example row). Important is to use the background property, which turns off using images for rendering and permits to use cascading style sheets for rendering.

updated 09.04.2010