使用带有自定义 CSS 的 type="search" 时，'x' 不显示在 Firefox 输入中答案

【问题标题】：'x' not displaying in Firefox inputs when using type="search" with custom CSS使用带有自定义 CSS 的 type="search" 时，'x' 不显示在 Firefox 输入中
【发布时间】：2021-04-26 17:59:19
【问题描述】：

我一直在搜索 Stack Overflow 上一个问题的答案，但似乎对我的 Firefox 问题没有帮助。

我的所有输入都是 type="search"，然后是一些 CSS 来显示一个清晰的 button，这似乎在 Edge、IE、Chrome 中有效，但在 Firefox 中无效。

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  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;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}

input[type="search"]:hover::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}


/* Doesn't displays the 'X' when input 'Disabled' */

input[type="search"]:disabled::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background: none;
  cursor: not-allowed;
}

&lt;input class="form-control mand" type="search" /&gt;

截图

Chrome/IE/Edge

Chrome 等“x”显示为 onhover 和 onfocus，但从未在 FF 中显示，因为我使用的是 Fontawesome 图像，所以我觉得这很奇怪。

我也尝试过使用

input[type="search"] {
    background: transparent 
        url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg);
    background-position: 7px 7px;
    background-repeat: no-repeat;
    background-position: 2px 3px;
}

但还是什么都没有。我从另一篇帖子here中引用了上述内容。

【问题讨论】：

Firefox 应该支持所有::-webkit-search-… 的东西吗，你验证了吗？
看这里，developer.mozilla.org/en-US/docs/Web/CSS/…
@mplungjan 输入必须包含一个值才能显示。您对我的帖子所做的更新以允许 sn-p 对我有用
顾名思义，-webkit-search-cancel-button 不是标准的伪元素，而是 webkit 浏览器引擎的专有特性。通常，您对小部件样式没有如此高度的控制，尤其是。复杂的。

标签： html css

【解决方案1】：

这将解决您的问题。

“我从另一个帖子here引用了上述内容”

您可以像这样将图标放在输入旁边。因此，您可以避免浏览器支持问题。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: #fff;
  color: #000;
  border:1px solid #000;
  border-right:none;
  min-width: 50px;
  text-align: center;
  font-size:20px;
}

.input-field {
  width: 100%;
  font-size:20px;
  padding: 5px;
  outline: none;
  border:1px solid #000;
  border-left:none;
  color:#000;
}
  
  .input-field::placeholder {
    color:#000;
  }

</style>
</head>
<body>
<form action="" style="max-width:500px;margin:auto">
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  </form>
  </body>

【讨论】：

【解决方案2】：

According to MDN Web Docs，Firefox 不支持::-webkit-search-cancel-button，建议不要在严肃的网站上使用它。我建议你看一些the answers to this question。最受欢迎的选项似乎在 Firefox 中不起作用，但它下面的一些选项似乎可以满足您的需求。 This answer looks good, as it requires no JS.这不是页面上最好看的，但我相信你可以解决这个问题。

【讨论】：