diff --git a/app/assets/template/stylesheets/elements/_forms.scss b/app/assets/template/stylesheets/elements/_forms.scss index 9b715f1..983bbdc 100644 --- a/app/assets/template/stylesheets/elements/_forms.scss +++ b/app/assets/template/stylesheets/elements/_forms.scss @@ -9,6 +9,7 @@ // 4. Form hints // 5. Form controls // 6. Form control widths +// 7. Browser accessibility fixes // 1. Helpers // ========================================================================== @@ -35,14 +36,14 @@ textarea { // 2. Form wrappers // ========================================================================== -// Form section is used to wrap .form-group and has twice its margin -.form-section { +.form-section, +.form-group { @extend %contain-floats; @include box-sizing(border-box); +} - float: left; - width: 100%; - +// Form section is used to wrap .form-group and has twice its margin +.form-section { margin-bottom: $gutter; @include media(tablet) { @@ -52,12 +53,6 @@ textarea { // Form group is used to wrap label and input pairs .form-group { - @extend %contain-floats; - @include box-sizing(border-box); - - float: left; - width: 100%; - margin-bottom: $gutter-half; @include media(tablet) { @@ -102,9 +97,8 @@ textarea { // Used for the 'or' in between block label options .form-block { - @extend %contain-floats; float: left; - width: 100%; + clear: left; margin-top: -5px; margin-bottom: 5px; @@ -162,11 +156,16 @@ textarea { // scss-lint:disable QualifyingElement input.form-control, textarea.form-control { - // Remove inner shadow + // Disable inner shadow and remove rounded corners -webkit-appearance: none; - // Remove rounded corners border-radius: 0; } + +textarea.form-control { + // Disable opacity and background image for Firefox + opacity: 1; + background-image: none; +} // scss-lint:enable QualifyingElement @@ -223,3 +222,13 @@ textarea.form-control { width: 12.5%; } } + +// 7. Browser accessibility fixes +// ========================================================================== + +option:active, +option:checked, +select:focus::-ms-value { + color: $white; + background-color: $govuk-blue; +} \ No newline at end of file