Skip to content

Commit

Permalink
Fix radios in Windows high contrast mode
Browse files Browse the repository at this point in the history
Windows has a high contrast theme that sets borders and background to different colours. In our case we’ve rendered the custom checkboxes using only borders, so that’s fine. The custom radio however has its outline rendered with a border, but the bullet rendered with a background. In high contrast mode the bullet was black-on-black and wasn’t showing.

We can fix this by rendering the bullet with borders instead. We just set a width and height of 0, then make the border 10px thick on every side.

Tested in IE8+, Fx, Chrome, old iOS Safari and IE Mobile.
  • Loading branch information
Robin Whittleton committed Nov 17, 2016
1 parent ea23ea5 commit 6f6a1b0
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions public/sass/elements/forms/_form-block-labels.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@

&.selection-button-radio::after {
content: "";
background: currentColor;
width: 20px;
height: 20px;
border: 10px solid;
width: 0;
height: 0;
position: absolute;
top: 9px;
left: 9px;
Expand Down

0 comments on commit 6f6a1b0

Please sign in to comment.