From dedf43e38fef7ac596dc7911fd2c84ca260dfe81 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Fri, 14 May 2021 10:58:19 +0100
Subject: [PATCH 1/2] Fix checkbox display in IE8
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We use the `before` and `after` pseudo-elements on the label for checkboxes to provide stylised checkboxes in modern browsers.

Internet Explorer 8 does not support some of the features we use to do this, so we ‘fall back’ to the native HTML inputs instead.

In 09ef79d2e4ed5ea824d1f09526f902a4c8edc643 we updated the before and after pseudo-elements in the checkboxes sass to use a single colon, which was newly enforced as part of a switch to stylelint.

IE8 only supports the single-colon syntax [1], and it looks like we were actually relying on the double-colon syntax _not_ being interpreted by IE8 in order to prevent them being displayed in that browser.

As a result, changing to a single-colon means that IE8 now interprets the pseudo-selectors, and as a result ends up with a malformed checkmark visible next to the native HTML input.

Wrap the before and after pseduo-elements with the @govuk-not-ie8 mixin to exclude these rules from being included in the IE8 specific stylesheet.

[1]: https://caniuse.com/css-gencontent
---
 src/govuk/components/checkboxes/_index.scss | 74 +++++++++++----------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss
index 99a1fd097b..fcaf4fa8e7 100644
--- a/src/govuk/components/checkboxes/_index.scss
+++ b/src/govuk/components/checkboxes/_index.scss
@@ -72,43 +72,45 @@
     touch-action: manipulation;
   }
 
-  // [ ] Check box
-  .govuk-checkboxes__label:before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
-    border: $govuk-border-width-form-element solid currentColor;
-    background: transparent;
-  }
+  @include govuk-not-ie8 {
+    // [ ] Check box
+    .govuk-checkboxes__label:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $govuk-checkboxes-size;
+      height: $govuk-checkboxes-size;
+      border: $govuk-border-width-form-element solid currentColor;
+      background: transparent;
+    }
+
+    // ✔ Check mark
+    //
+    // The check mark is a box with a border on the left and bottom side (└──),
+    // rotated 45 degrees
+    .govuk-checkboxes__label:after {
+      content: "";
+      box-sizing: border-box;
+
+      position: absolute;
+      top: 11px;
+      left: 9px;
+      width: 23px;
+      height: 12px;
+
+      transform: rotate(-45deg);
+      border: solid;
+      border-width: 0 0 5px 5px;
+      // Fix bug in IE11 caused by transform rotate (-45deg).
+      // See: alphagov/govuk_elements/issues/518
+      border-top-color: transparent;
 
-  // ✔ Check mark
-  //
-  // The check mark is a box with a border on the left and bottom side (└──),
-  // rotated 45 degrees
-  .govuk-checkboxes__label:after {
-    content: "";
-    box-sizing: border-box;
-
-    position: absolute;
-    top: 11px;
-    left: 9px;
-    width: 23px;
-    height: 12px;
-
-    transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 5px 5px;
-    // Fix bug in IE11 caused by transform rotate (-45deg).
-    // See: alphagov/govuk_elements/issues/518
-    border-top-color: transparent;
-
-    opacity: 0;
-
-    background: transparent;
+      opacity: 0;
+
+      background: transparent;
+    }
   }
 
   .govuk-checkboxes__hint {

From 7d046a0a2a45c3af0b19fa3b1157cc86d2f69b3a Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 17 May 2021 10:21:44 +0100
Subject: [PATCH 2/2] Document in CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64b061dc24..c14821ad0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Fixes
+
+- [#2228: Fix display of checkboxes in Internet Explorer 8](https://github.com/alphagov/govuk-frontend/pull/2228)
+
 ## 3.12.0 (Feature release)
 
 ### New features