HTML&CSS Kata: Custom Radio Buttons

[codingbootcampseu]

Create a custom radio buttons like this using CSS only.

Requirements

• Animate the state change from selected to unselected (and vice versa)
• Show the focus state
• Use semantic markup to not break keyboard input

Hints

Use all: unset; to reset all styles for an input element.

.custom-radio-button { 
  all: unset;
  /* Your checkbox styles */
}

A pseudo element (::before or ::after) can be used to display the selected state (which can then be animated).

.custom-radio::before { 
  content: '';
  display: block;
  ...
}

Don't forget to include the name attribute to be able so switch between the different options.

<input class="custom-radio" type="radio" value="one" name="test" checked />
<input class="custom-radio" type="radio" value="two" name="test" />
<input class="custom-radio" type="radio" value="three" name="test" />

[SzabiSch]

tricky