I'm using normalize.css and it does remove the icon for search inputs
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
I want to revert some selectors (not all!) in my css file, but I cannot find the default user agent styles for it.
for the search cancel button the solution is:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
But the webkit-search-decoration
property isn't reverted and I don't know what was also be normalized. And I cannot inspect the styles because it's this fancy special pseudo element!
here is a demo: http://jsbin.com/capujozi/1/edit
Where I can find the specs for the default user agent styles values?
Such as -webkit- is replaced by -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc.
The CSS -webkit-appearance property enables web authors to change the appearance of HTML elements to resemble native User Interface (UI) controls. The CSS -webkit-appearance property is a proprietary CSS extension that is supported by the WebKit browser engine.
The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme.
Where I can find the specs for the default user agent styles values?
You can find a fairly recent copy of WebKit's UA stylesheet here.
And here are the relevant rules for the ::-webkit-search-decoration
pseudo-element:
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: searchfield-decoration;
display: block;
-webkit-flex: none;
-webkit-align-self: flex-start;
margin: auto 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With