Search code examples
cssgoogle-chromesafariwebkitnormalize

how can I revert webkit-appearance for input[type="search"] of normalize.css

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?

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;
}