【问题标题】:Override the -webkit-search-cancel-button覆盖 -webkit-search-cancel-button
【发布时间】:2014-05-20 15:56:25
【问题描述】:

我正在尝试覆盖出现在搜索栏中的小 (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;    
}

有什么想法吗?谢谢。

【问题讨论】:

  • 你想删除那个“X”还是改变样式
  • 我想改变它的样式,我也注意到它没有出现在 Firefox 上;有没有其他方法让它出现在 Firefox 上,因为我看到的例子也有这个问题。

标签: javascript html css search


【解决方案1】:

DEMO

1) Mozilla 将搜索输入视为文本。然而,对于 Webkit 浏览器(Chrome、Safari),搜索输入的样式是客户端创建的 HTML

2) 适用于 chrome

CSS

Article link

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) */

}

Similar Question

【讨论】:

  • 有没有办法为 input[type="time"] 做到这一点?
  • 我有这个问题github.com/twbs/bootstrap/issues/5624。但我想要交叉 X 而不是红色背景。如何使用内容:css中的'X'。
【解决方案2】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-12
    • 1970-01-01
    • 2017-10-02
    相关资源
    最近更新 更多