Normalize `input[type="search"]`

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

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index d0633ae..579bd5f 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -27,8 +27,6 @@
 //
 // 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%;
@@ -74,6 +72,23 @@
                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 {