| CARVIEW |
Select Language
HTTP/2 200
strict-transport-security: max-age=63072000; includeSubDomains; preload
x-frame-options: SAMEORIGIN
x-content-type-options: nosniff
accept-ranges: bytes
cache-control: max-age=2592000
expires: Mon, 10 Nov 2025 11:16:04 GMT
vary: Accept-Encoding,User-Agent
content-encoding: gzip
content-length: 1741
content-type: text/html
date: Sat, 11 Oct 2025 11:16:04 GMT
server: Apache/2.4.64
Styling radio buttons with CSS | 456 Berea Street
Styling radio buttons with CSS
This demo page is related to the article Styling form controls with CSS, revisited. For more info on the purpose of this page, please read the article.
Each radio button control consists of this HTML:
<input type="radio" name="radiogroup" id="radio-1"><label for="radio-1">Radio button 1</label>
The following CSS rules are used to style the radio buttons:
#el01 {width:100%} /* Width */#el02 { /* Text and background colour, blue on light gray */color:#00f;background-color:#ddd;}#el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */#el04 {border-width:6px} /* Border width */#el05 {border:2px dotted #00f} /* Border width, style and colour */#el06 {border:none} /* No border */#el07 {padding:1em} /* Increase padding */#el08 { /* Change width and height */width:4em;height:4em;}
In your current browser, with your current settings, the radio buttons look like this:
And here are screenshots from several browsers on different operating systems:
- Camino 1, Mac OS X 10.4.8
- Firefox 2.0.0.1, Mac OS X 10.4.8
- Firefox 2.0.0.1, Ubuntu 6.10
- Firefox 2.0.0.1, Windows XP
- iCab 3.0.3, Mac OS X 10.4.8
- Internet Explorer 6, Windows XP
- Internet Explorer 7, Windows XP
- Konqueror 3.5.5, Kubuntu
- OmniWeb 5.5.1, Mac OS X 10.4.8
- Opera 9.10, Mac OS X 10.4.8
- Opera 9.10, Ubuntu 6.10
- Opera 9.10, Windows XP
- Safari 2.0.4, Mac OS X 10.4.8
- WebKit 420+, Mac OS X 10.4.8
Lab Index | 456 Berea Street Home | Copyright © Roger Johansson