Use border for small radio buttons

This means that they display correctly when colours are overridden in the browser.
alphagov · Mar 18, 2019 · 4ac2df0 · 4ac2df0
1 parent b5bf0a6
commit 4ac2df0
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss
@@ -96,6 +96,9 @@
  }
 
  // • Radio button
+ //
+ // We create the 'button' entirely out of 'border' so that they remain
+ // 'filled' even when colours are overridden in the browser.
  .govuk-radios__label::after {
  content: "";
 
@@ -274,9 +277,7 @@
  .govuk-radios__label::after {
  top: 14px;
  left: 6px;
- width: 10px;
- height: 10px;
- border-width: 1px;
+ border-width: 6px;
  }
 
  // Fix position of hint with small radios