diff --git a/CHANGELOG.md b/CHANGELOG.md index b2270be4c0..1811c061bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: - [#1838: Correctly camel case SVG attributes in the header and footer](https://github.com/alphagov/govuk-frontend/pull/1838) - [#1842: Preserve the state of conditional reveals when navigating 'back' in the browser](https://github.com/alphagov/govuk-frontend/pull/1842) - [#1855: Hint component can render block-level elements as valid HTML](https://github.com/alphagov/govuk-frontend/pull/1855) +- [#1861: Fix the display of checkboxes when border-box box sizing is applied globally](https://github.com/alphagov/govuk-frontend/pull/1861) ## 3.7.0 (Feature release) diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss index 50d9b0da92..1973098912 100644 --- a/src/govuk/components/checkboxes/_index.scss +++ b/src/govuk/components/checkboxes/_index.scss @@ -91,16 +91,17 @@ // rotated 45 degrees .govuk-checkboxes__label::after { content: ""; + box-sizing: border-box; position: absolute; top: 11px; left: 9px; - width: 18px; - height: 7px; + width: 23px; + height: 12px; transform: rotate(-45deg); border: solid; - border-width: 0 0 $govuk-border-width $govuk-border-width; + 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; @@ -233,8 +234,8 @@ .govuk-checkboxes__label::after { top: 15px; left: 6px; - width: 9px; - height: 3.5px; + width: 12px; + height: 6.5px; border-width: 0 0 3px 3px; }