From 0971c0a3d891f29039b9a782a665962aab12b782 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 10 Nov 2021 11:39:06 +0000 Subject: [PATCH] Fix enhancedTextbox styles in high contrast mode The enhancedTextbox component has an element that sits in front of the textbox and draws the highlights over the text. This element has a 2px border so it's dimensions match those of the textbox. This border has a colour of 'transparent' by default, to hide it from view but this is overridden in high contrast modes to match the text colour. This adds some CSS targeting high contrast modes which sets it to match the colour of the background, making it invisible again. --- app/assets/stylesheets/components/textbox.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index c20769caa..f9687a7ea 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -39,6 +39,11 @@ padding-bottom: govuk-spacing(3); z-index: 10; + // transparent borders become visible in high contrast modes so set to match background + @media (-ms-high-contrast: active), (forced-colors: active) { + border-color: Canvas; + } + .placeholder, .placeholder-conditional { color: transparent;