Question

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?

Was it helpful?

Solution

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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top