Question

如何更改输入[type = search]

上显示的X的颜色

使用webkit-search-cancel-button和webkit-appearance: none我可以将其更改为彩色方块或圆圈，但我无法更改X的颜色。

问题是safari上的X的默认颜色是黑色，而文本框是黑色的，因此这是不可见的。 Chrome选择了安全的灰色，但它也有同样的问题。

Answer 1

我找不到仅更改颜色的方法，但是您可以使用以下方法覆盖“ x”按钮样式：

input[type="search"]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
  /*Your new styles */
  height: 10px;
  width: 10px;
  background: red;
}

目前，Webkit浏览器（Chrome，Safari）支持此功能。 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button

Answer 2

您指的是输入有值时出现的小图标吗？我想你可以使用background: yourColor;来改变它的颜色。您当然也需要使用webkit-appearance: none - 这应该允许您自定义它。我在这里找到了这些信息：https://css-tricks.com/webkit-html5-search-inputs/#article-header-id-5

更改x输入类型=搜索的颜色

2 个答案: