Override the -webkit-search-cancel-button
Override the -webkit-search-cancel-button
我正在尝试覆盖搜索栏中出现的小(x),让它做的不仅仅是清除搜索
目前这是我的搜索栏:.HTML:
<input type="search" class="form-control" id="inputSearch" placeholder="Search for node" onchange="searchForNode(this)"></div>
.CSS:
#inputSearch::-webkit-search-cancel-button{
position:relative;
right:20px;
}
有什么想法吗?谢谢。
演示
1) Mozilla 将搜索输入视为文本。但是,对于Webkit浏览器(Chrome,Safari),搜索输入的样式设置为客户端创建的HTML
2) 用于铬
.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) */
}
类似问题
Chrome 的示例:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 24px;
width: 24px;
margin-left: .4em;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
cursor: pointer;
}
相关文章:
- Lucene Search in Alfresco
- 如何在构建node-webkit应用程序后获取外部资源
- node-webkit-从父窗口捕获iframe鼠标事件
- 节点webkit应用程序与终端通话
- 如何保护节点webkit应用程序上的字体
- 将webkit从CSS转换为JavaScript
- Chrome(webkit?)无法在幻灯片中正确显示图像
- Jquery工具在Webkit中不起作用
- 如何's css标记"-webkit最小设备像素比”;在Javascript中实现
- 如何从Node Webkit应用程序中退出外部CMD文件
- JSON and jQuery Search
- 动态更改Webkit筛选器值
- 当z索引为负值时,onclick在webkit或mozilla中不起作用
- 在javascript中与webkit转换作斗争
- -webkit转换在JavaScript旋转动画中不起作用(没有JQuery)
- Javascript Regex Search
- 使用-webkit transform:scale()缩放图像
- 在Node Webkit应用程序中从DOM单击按钮时运行批处理文件
- -当在JQuery Slider上添加-webkit线性梯度时,moz线性梯度会被破坏
- Override the -webkit-search-cancel-button