你可以使用一个带有图像样式的重置按钮…

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

在这里查看它的实际操作:http://jsbin.com/uloli3/63

在输入中添加type="search" 支持是相当不错的，但将无法在IE<10

= >“搜索”型输入<

老版本浏览器

如果你需要IE9支持，这里有一些变通方法

使用标准的<input type="text">和一些HTML元素:

/** * Clearable text inputs */ $(".clearable").each(function() { const $inp = $(this).find("input:text"), $cle = $(this).find(".clearable__clear"); $inp.on("input", function(){ $cle.toggle(!!this.value); }); $cle.on("touchstart click", function(e) { e.preventDefault(); $inp.val("").trigger("input"); }); }); /* Clearable text inputs */ .clearable{ position: relative; display: inline-block; } .clearable input[type=text]{ padding-right: 24px; width: 100%; box-sizing: border-box; } .clearable__clear{ display: none; position: absolute; right:0; top:0; padding: 0 8px; font-style: normal; font-size: 1.2em; user-select: none; cursor: pointer; } .clearable input::-ms-clear { /* Remove IE default X */ display: none; } <span class="clearable"> <input type="text" name="" value="" placeholder=""> <i class="clearable__clear">&times;</i> </span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

只使用<input class="clearable" type="text">(没有附加元素)

设置class="clearable"并使用它的背景图像:

/** * Clearable text inputs */ function tog(v){return v ? "addClass" : "removeClass";} $(document).on("input", ".clearable", function(){ $(this)[tog(this.value)]("x"); }).on("mousemove", ".x", function( e ){ $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]("onX"); }).on("touchstart click", ".onX", function( ev ){ ev.preventDefault(); $(this).removeClass("x onX").val("").change(); }); // $('.clearable').trigger("input"); // Uncomment the line above if you pre-fill values from LS or server /* Clearable text inputs */ .clearable{ background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center; border: 1px solid #999; padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */ border-radius: 3px; transition: background 0.4s; } .clearable.x { background-position: right 5px center; } /* (jQ) Show icon */ .clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */ .clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */ <input class="clearable" type="text" name="" value="" placeholder="" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center). That 18px padding will prevent the text hide underneath the icon (while visible). jQuery will add the class "x" (if input has value) showing the clear icon. Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX. Clicking the onX class removes all classes, resets the input value and hides the icon.

7x7px 动图：

Base64字符串:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

在设计模式下将文本框类型更改为'search'或

<input type="search">

我的建议是，如果你不介意仅限于html 5兼容的浏览器，只需使用:

<input type="search" />

JS小提琴演示

不可否认，在Chromium (Ubuntu 11.04)中，这确实要求在明文图像/功能出现之前在输入元素中有文本。

参考:

深入HTML 5:一种疯狂的形式。 输入类型=搜索-搜索字段(新)HTML5。

由于没有一个解决方案能够真正满足我们的需求，我们想出了一个简单的jQuery插件，叫做jQuery- clearsearch -

使用它就像:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

​ 例如:http://jsfiddle.net/wldaunfr/FERw3/

使用简单的绝对定位——这并不难。

jQuery:

$('span').click(function(){ $('input', $(this).parent()).val(''); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div>

香草JS:

var spans = document.getElementsByTagName("span"); function clickListener(e) { e.target.parentElement.getElementsByTagName("input")[0].value = ""; } for (let i = 0; i < spans.length; i++) { spans[i].addEventListener("click", clickListener); } <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div> <div style="position:relative; width:min-content;"> <input> <span style="position:absolute;right:10px">x</span> </div>