Bryntum
Published in

Bryntum

3 ways to style radio buttons with modern CSS

[type=radio]:checked::before { 
content: "";
width: 14px;
height: 14px;
background-color: #ffa500;
position: absolute;
top: 2px;
left: 2px;
}

Modern CSS to the rescue

CodePen
The CodePen (link below)

Using accent-color

body { accent-color: red; }
  • Simple to use
  • Low stylability
  • Not fully supported

Using box-shadow

input { 
/* The native appearance is hidden */
appearance: none;
-webkit-appearance: none;

/* For a circular appearance we need a border-radius. */
border-radius: 50%;
/* The background will be the radio dot's color. */
background: #FF572233;
/* The border for spacing between the dot and the circle */ border: 3px solid #FFF; /* box-shadow with no offset and no blur => an outer circle */
box-shadow: 0 0 0 1px solid #FF5722; }
  • Full support
  • High stylability
  • Scales badly in some environments.

Using outline

input { 
appearance: none;
-webkit-appearance: none;
border-radius: 50%;
background: #e8e8e8;
border: 3px solid #FFF;
/* The outline will be the outer circle */
outline: 1px solid #999;
}
  • Scales better than box-shadow
  • High stylability
  • Does not affect layout
  • No Safari support.

Which one to choose?

--

--

Bryntum creates advanced Gantt project management UI components for web application development, as well as developer tools for testing and error monitoring.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mats Bryntse

Mats Bryntse

19 Followers

CEO @ Bryntum, passionate about all things web dev / JS / CSS.