site logo

Checkbox and Radio button in Opera browser

Ideal options of styling form elements checkbox and radio exposed Opera (till version 12). With the help of CSS can be completly removed borders, elements can be colored, and size of elements can be set. Basic shape, typical for the form element stay unchanged. It is a big challenge for all other browsers.

Opera version 15 started using Blink rendering engine, derived from WebKit. Chrome uses the same core. This kernel relies on rendering form elements checkbox and radio on Windows OS, according to 20-year-old W3C recommendation. The transition to modern rendering engine is certainly a step forward, the look of form elements checkbox and radio in Blink is a step back.

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