Limiting property `-webkit-appearance` to `input[type="search"]` only,
as it's the element this rule is targeting for instead of unnecessarily
applying it to all `.mw-ui-input` elements. Also adding rule to
remove proprietary IE 10-11 clear button. Bringing it on
par with OOjs UI.
Change-Id: Id375fdb86bf7ef3cfbb2f7e198d59be4947e4edb
//
// Styleguide 1.1.
.mw-ui-input {
- // turn off default input styling for input[type="search"] fields
- -webkit-appearance: none;
.box-sizing( border-box );
display: block;
width: 100%;
border-color: @colorGray14;
color: @colorGray12;
}
+
+ // Normalize styling for `<input type="search">`
+ &[type="search"] {
+ // Correct the odd appearance in Chrome and Safari 5
+ -webkit-appearance: textfield;
+
+ // Remove proprietary clear button in IE 10-11
+ &::-ms-clear {
+ display: none;
+ }
+
+ // Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+ }
}
textarea.mw-ui-input {