在Firefox、IE和Edge浏览器中，搜索输入框的取消按钮未显示。

Question

.hs-search-field__input {
    color: #111d33;
    border-bottom: 3px solid #111d33;
    appearance: searchfield;
    -moz-appearance: searchfield;
    -webkit-appearance: searchfield;
    -ms-appearance: searchfield;
    color: #fff;
    border-radius: 0px !important;
}

<input type="search" class="hs-search-field__input" name="term" autocomplete="off" aria-label="Search" placeholder="Search">

我添加了 <input type="reset">，在Chrome中运行良好，但是在Firefox、Internet Explorer和MS Edge中清除按钮无法使用：

- Anzer Mansuri

---

这听起来只是一种特定于浏览器的“增强”功能。规范中没有关于“取消”选项的内容。 - TylerH

Answer 1

搜索框上的清空按钮是Chrome浏览器特有的。我能想到的唯一解决方案是从Chrome中移除清空按钮并添加自定义的清空按钮。然而，如果其它浏览器将来决定添加这个浏览器特有功能，这可能会引起问题。

这可能不是您正在寻找的答案，而且您可能已经知道如何做到这一点，但我已经准备了一个示例来展示如何从Chrome中删除清除按钮并创建自定义的清除按钮。

// Get clear buttons
const clear = document.querySelectorAll('.clear');

// Loop through clear buttons. 
// This is so you can have multiple search fields on a page.
for (let i = 0; i < clear.length; i++) {
   // Add a click event listener to each clear button
   clear[i].addEventListener("click", function() {
     // Clear sibling search input
     clear[i].previousElementSibling.value='';
   });
}

/* Remove chrome clear button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

/* Basic clear button styling */
.clear {
 position:absolute;
 right:4px;
 top:2px;
 cursor:pointer;
 display:inline-block;
}

/* Basic search wrapper and input styling */
.search-wrap {
 display:inline-block;
 position:relative;
}
.search-wrap input[type="search"] {
 padding-right:20px;
}

<div class="search-wrap">
  <input type="search">
  <div class="clear">X</div>
</div>

- WizardCoder

---

我已经知道这个解决方案，但我正在寻找一些CSS技巧。现在这对我很有效。@WizardCoder 谢谢你提供的解决方案。 - Anzer Mansuri