From 4e50e9bf44fadc42b1e5ac0737ad72a727a77fce Mon Sep 17 00:00:00 2001 From: Robin Whittleton Date: Thu, 17 Nov 2016 15:12:03 +0000 Subject: [PATCH] Fix radios in Windows high contrast mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- public/sass/elements/forms/_form-block-labels.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss index 6410b4591..237658d34 100644 --- a/public/sass/elements/forms/_form-block-labels.scss +++ b/public/sass/elements/forms/_form-block-labels.scss @@ -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;