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.
This commit is contained in:
Tom Byers
2021-11-10 11:39:06 +00:00
parent 58d80f5097
commit 0971c0a3d8

View File

@@ -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;