时间戳

首页 > 解决方案 > 输入类型“搜索”取消按钮未在 Firefox、IE 和 Edge 中显示

html - 输入类型“搜索”取消按钮未在 Firefox、IE 和 Edge 中显示

问题描述

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

我添加了，它在 chrome 中运行良好，但清除按钮在 Firefox、Internet Explorer 和 MS Edge 中不起作用：

浏览器输出

标签： htmlcssformscss-selectors

解决方案

搜索字段上的清除按钮特定于 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>

推荐阅读