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

旧时模样 提交于 2020-01-01 10:49:38

问题


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?


回答1:


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


来源:https://stackoverflow.com/questions/23569161/how-can-i-revert-webkit-appearance-for-inputtype-search-of-normalize-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!