fbpx

3 ways to style radio buttons with modern CSS

Styling native radio input elements cross-browser is a bit more painful than it should be. Over the years, lots and lots of blogs have discussed this topic and provided various styling workarounds. Most solutions involve showing additional pseudo elements such as

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

Modern CSS to the rescue

With some simple and modern CSS, we can now style radio button input elements even easier. Below are three different options, each having its pros and cons. You can try out the different options in the CodePen below.

See the Pen
Styled radio buttons
by Bryntum (@bryntum)
on CodePen.

Using accent-color

The CSS property accent-color styles some native elements by changing their accent color. This property is widely supported in 2022. But it is not fully supported and most browsers only started supporting it in 2021.

body {
  accent-color: red;
}

Pros

  • Simple to use

Cons

  • Low stylability
  • Not fully supported

Using box-shadow

Both the box-shadow and the outline solutions are accomplished by hiding the native appearance of the element. And then with a combination of background, border and an outer circle, we create a new appearance which will is easier to style.

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 will be the spacing between the dot and the outer circle */
  border: 3px solid #FFF;

  /* And by creating a box-shadow with no offset and no blur, we have an outer circle */
  box-shadow: 0 0 0 1px #FF5722;
}


Note that in some cases the box-shadow can be clipped by it’s container. In these cases, a margin can be a good solution.

Pros

  • Full support
  • High stylability

Cons

  • Scales badly in some environments.

Using outline

The outline solution applies the same technique as the box-shadow solution, but creates the outer circle using the outline property instead. Outline is widely supported, but not in combination with border-radius which does not work as expected in Safari.

Note that the outline is the browser’s default focus style. When changing the outline style, you should always have accessibility in mind.

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;
}

Pros

  • Scales better than box-shadow
  • High stylability
  • Does not affect layout

Cons

  • No Safari support.

Which one to choose?

In the upcoming 5.1 release, we at Bryntum decided to use the `box-shadow` option in our Radio button widget. It provides a reliable cross-browser appearance and it is compatible with a bit older browsers. You can see this in action in our conflict resolution dialog in the Scheduler Pro.

Leave a Reply

avatar
  Subscribe  
Notify of