使用 -webkit-search-cancel-button 时真正隐藏的清除图标

Question

在下一个 post:

之后使用 -webkit-search-cancel-button 实现了 清除按钮

上面引用的实现的问题在于，它使 清除图标 在失焦时不可见，但它仍然占据 space 并且看起来不一点都不错：

它可以是小型设备上的长占位符，也可以是长用户查询：

尝试用 display: none 解决它并没有真正起作用，因为当输入处于焦点时它仍然呈现不可见，但是还没有用户输入并且只显示占位符（和部分它被隐形图标吃掉了）。

问.有没有办法让图标真正不可见，只在两种情况下显示：

输入内容处于焦点位置。
用户提供了一些输入，占位符消失了。

Answer 1

display: none; 和 display: block; 为我工作（最新的 Chrome）。有必要在聚焦时添加 dispay block (input[type="search"]:focus::-webkit-search-cancel-button).

如果还是不行，试试!important。有时浏览器样式更难覆盖。（我不推荐使用 !important，但有时别无他法）。

如果您想要在用户没有提供技术支持的情况下显示清除按钮，请添加：

input[type="search"]::-webkit-search-cancel-button {
    opacity: 1 !important;
}

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  margin-left: .5em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  display: none;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  display: block;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

<input type="search" placeholder="search" class="light">
<input type="search" placeholder="search" class="dark">

已编辑：

我做到了，如你所愿。

我用过：https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

我还留下了轮廓边框以便更好地理解。

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}
input[type="search"]::-webkit-textfield-decoration-container {
  width: 100%;
}

/* normal state, with placeholder and no value */
input[type="search"]:placeholder-shown::-webkit-textfield-decoration-container {
  outline: 1px dotted yellow;
}

/* focused state, with placeholder and no value */
input[type="search"]:placeholder-shown:focus::-webkit-textfield-decoration-container {
  outline: 1px dotted red;
}

/* focused state, with value */
input[type="search"]:not(:placeholder-shown):focus::-webkit-textfield-decoration-container {
  outline: 1px dotted green;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 0;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  pointer-events: none;
}
input[type="search"]:not(:placeholder-shown):focus::-webkit-search-cancel-button {
  display: block;
  width: 1em;
  margin-left: .5em;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

<input type="search" placeholder="search search search search search search" class="light">
<input type="search" placeholder="search search search search search search" class="dark">

Answer 2

我已经检查过你的问题，从我的角度来看，解决问题的最简单方法如下：

input[type="search"]::-webkit-search-cancel-button {
display: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
display: block;
}

你应该将这两行添加到你现有的代码中，应该没问题 :)

代码在这里：https://codepen.io/BaciuTudor/pen/YzxaYKV

使用 -webkit-search-cancel-button 时真正隐藏的清除图标

Truly hidden clear icon when using -webkit-search-cancel-button

html

css

input

已编辑：