Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 709
timaschew Avatar asked May 09 '14 16:05

timaschew


People also ask

What can I use instead of WebKit appearance?

Such as -webkit- is replaced by -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc.

What is WebKit appearance None?

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.

What is use of appearance in CSS?

The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme.


1 Answers

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;
}
like image 161
Adrift Avatar answered Nov 14 '22 02:11

Adrift