:invalid is incorrectly overriding a :focus:invalid element
correct the order and add a note about this.
Change-Id: I4ee1a4634840b2251e294dfb704c1f5e3b730f7d
.field-placeholder-styling;
}
- &:focus {
- box-shadow: inset .45em 0 0 #5088f7;
- border-color: @colorGrayDark;
- // Remove focus glow on input[type="search"]
- outline: 0;
- }
-
// Remove red outline from inputs which have required field and invalid content.
// This is a Firefox only issue
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
+ // This should be above :focus so focus behaviour takes preference
&:invalid {
box-shadow: none;
}
+
+ &:focus {
+ box-shadow: inset .45em 0 0 #5088f7;
+ border-color: @colorGrayDark;
+ // Remove focus glow on input[type="search"]
+ outline: 0;
+ }
}
textarea.mw-ui-input {