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

Question

使用 -webkit-search-cancel-button 实现了一个清除按钮在下一个帖子之后:

https://stackoverflow.com/a/64267916/1065145

上面引用的实现的问题是它在失焦时使清晰的图标不可见，但它仍然占用空间并且看起来一点也不好看:

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

试图用 display: none 解决它并没有真正起作用，因为当输入处于焦点时它仍然不可见，但是还没有用户输入并且只显示占位符(并且它的一部分被不可见的图标吃掉了)。
问 有没有办法让图标真正不可见，所以它只在两种情况下显示:

输入是焦点。

用户提供了一些输入，占位符不见了。

Answer 1

display: none;和 display: block;为我工作(最新的 Chrome)。
有必要添加dispay block聚焦时(输入[type="search"]:focus::-webkit-search-cancel-button)。
如果还是不行，试试 !important .有时浏览器样式更难覆盖。 (我不建议使用 !important ，但有时没有其他方法)。
如果即使用户没有提供 tekst 也想显示清除按钮，请添加:

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">