javascript 覆盖 -webkit-search-cancel-button
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22928819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override the -webkit-search-cancel-button
提问by Pravin Waychal
I'm trying to override the small (x) that appears in the search bar, to have it do more than clear the search
我试图覆盖出现在搜索栏中的小 (x)，让它做的不仅仅是清除搜索
Currently this is my search bar: HTML:
目前这是我的搜索栏：HTML：
<input type="search" class="form-control" id="inputSearch" placeholder="Search for node" onchange="searchForNode(this)"></div>
CSS:
CSS：
#inputSearch::-webkit-search-cancel-button{
position:relative;
right:20px;
}
Any ideas? Thanks.
有任何想法吗？谢谢。
回答by Pravin Waychal
1) Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML
1) Mozilla 将搜索输入视为文本。但是，对于 Webkit 浏览器（Chrome、Safari），搜索输入的样式为客户端创建的 HTML
2) for chrome
2)镀铬
CSS
CSS
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
