From 6f6a1b0bca7d7583fd8c50b856d65cbc9a3d659c 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;