blocks|key|658208|text|你可以使用一个带有图像样式的重置按钮...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|658209|<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+%2B+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>|code-block|syntax|javascript|658210|在这里查看它的实际效果：http://jsbin.com/uloli3/63|offset|length|658211|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/uloli3/63^0|0|0|C|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You could use a reset button styled with an image...</p>

<pre><code>&lt;form action="" method="get"&gt;
   &lt;input type="text" name="search" required="required" placeholder="type here" /&gt;
   &lt;input type="reset" value="" alt="clear" /&gt;
&lt;/form&gt;

&lt;style&gt;
   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;
   }
&lt;/style&gt;
</code></pre>

<p>See it in action here: <a href="http://jsbin.com/uloli3/63" rel="noreferrer">http://jsbin.com/uloli3/63</a></p>


blocks|key|658267|text|如果你想让它像Google一样，那么你应该知道"X“实际上并不在<input>内部--它们是相邻的，外部容器的样式看起来像文本框。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|658268|HTML：|658269|<form>
++++<span+class="x-input">
++++++++<input+type="text"+class="x-input-text"+/>
++++++++<input+type="reset"+/>
++++</span>
</form>|code-block|syntax|javascript|658270|CSS：|658271|.x-input+{
++++border:+1px+solid+#ccc;
}

.x-input+input.x-input-text+{
++++border:+0;
++++outline:+0;
}|658272|示例：http://jsfiddle.net/VTvNX/|658273|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/VTvNX/^0|W|7|0|0|0|0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>If you want it like Google, then you should know that the "X" isn't actually inside the <code>&lt;input&gt;</code> -- they're next to each other with the outer container styled to appear like the text box.</p>

<p>HTML:</p>

<pre><code>&lt;form&gt;
    &lt;span class="x-input"&gt;
        &lt;input type="text" class="x-input-text" /&gt;
        &lt;input type="reset" /&gt;
    &lt;/span&gt;
&lt;/form&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.x-input {
    border: 1px solid #ccc;
}

.x-input input.x-input-text {
    border: 0;
    outline: 0;
}
</code></pre>

<p>Example: <a href="http://jsfiddle.net/VTvNX/" rel="nofollow">http://jsfiddle.net/VTvNX/</a></p>


blocks|key|875606|text|这是一个jQuery插件(最后还有一个演示)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875607|http://jsfiddle.net/e4qhW/3/|offset|length|875608|我这样做主要是为了说明一个例子(以及个人的挑战)。虽然积极的评价是受欢迎的，但其他的答案都是及时分发的，应该得到应有的认可。|875609|不过，在我看来，它是过度设计的臃肿(除非它是UI库的一部分)。|875610|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

<p>Here's a jQuery plugin (and a demo at the end).</p>

<p><a href="http://jsfiddle.net/e4qhW/3/" rel="nofollow">http://jsfiddle.net/e4qhW/3/</a></p>

<p>I did it mostly to illustrate an example (and a personal challenge). Although upvotes are welcome, the other answers are well handed out on time and deserve their due recognition.</p>

<p>Still, in my opinion, it is over-engineered bloat (unless it makes part of a UI library).</p>


blocks|key|658373|text|由于所有的解决方案都不能真正满足我们的需求，我们想出了一个名为jQuery-ClearSearch的简单jQuery插件--|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|658374|使用它非常简单，就像：|658375|<input+class="clearable"+type="text"+placeholder="search">

<script+type="text/javascript">
++++$('.clearable').clearSearch();
</script>|code-block|syntax|javascript|658376|http://jsfiddle.net/wldaunfr/FERw3/示例：​|658377|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/waslos/jquery-clearsearch|1|http://jsfiddle.net/wldaunfr/FERw3/^0|V|I|0|0|0|0|0|Z|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>Since none of the solutions flying around really met our requirements, we came up with a simple jQuery plugin called <a href="https://github.com/waslos/jquery-clearsearch">jQuery-ClearSearch</a> - </p>

<p>using it is as easy as:</p>

<pre><code>&lt;input class="clearable" type="text" placeholder="search"&gt;

&lt;script type="text/javascript"&gt;
    $('.clearable').clearSearch();
&lt;/script&gt;
</code></pre>

<p>​
Example: <a href="http://jsfiddle.net/wldaunfr/FERw3/">http://jsfiddle.net/wldaunfr/FERw3/</a></p>


blocks|key|875663|text|我已经使用jQuery和bootstrap编写了一个简单的组件。试一试：https://github.com/mahpour/bootstrap-input-clear-button|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|875664|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mahpour/bootstrap-input-clear-button^0|10|1J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I have written a simple component using jQuery and bootstrap.
Give it a try: <a href="https://github.com/mahpour/bootstrap-input-clear-button" rel="nofollow">https://github.com/mahpour/bootstrap-input-clear-button</a></p>


blocks|key|875696|text|我已经在CSS中创建了一个可清除的文本框。它不需要javascript代码就能工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875697|以下是演示链接|875698|http://codepen.io/shidhincr/pen/ICLBD|offset|length|875699|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

<p>I've created a clearable textbox in just CSS. It requires no javascript code to make it work</p>

<p>below is the demo link</p>

<p><a href="http://codepen.io/shidhincr/pen/ICLBD" rel="noreferrer">http://codepen.io/shidhincr/pen/ICLBD</a></p>


blocks|key|875724|text|jQuery手机现在内置了以下功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875725|<input+type="text"+name="clear"+id="clear-demo"+value=""+data-clear-btn="true">|code-block|syntax|javascript|875726|Jquery+Mobile+API+TextInput+docs|offset|length|875727|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquerymobile.com/textinput/^0|0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>jQuery Mobile now has this built in:</p>

<pre><code>&lt;input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true"&gt;
</code></pre>

<p><a href="https://api.jquerymobile.com/textinput/" rel="nofollow">Jquery Mobile API TextInput docs</a></p>


blocks|key|658494|text|像这样的东西？？Jsfiddle+Demo|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|658495|++++<!DOCTYPE+html>
<html>
<head>
++++<title></title>
++++<style+type="text/css">
++++.searchinput{
++++display:inline-block;vertical-align:+bottom;
++++width:30%25;padding:+5px;padding-right:27px;border:1px+solid+#ccc;
++++++++outline:+none;
}
++++++++.clearspace{width:+20px;display:+inline-block;margin-left:-25px;
}
.clear+{
++++width:+20px;
++++transition:+max-width+0.3s;overflow:+hidden;float:+right;
++++display:+block;max-width:+0px;
}

.show+{
++++cursor:+pointer;width:+20px;max-width:20px;
}
form{white-space:+nowrap;}

++++</style>
</head>
<body>
<form>
<input+type="text"+class="searchinput">
</form>
<script+src="jquery-1.11.3.min.js"+type="text/javascript"></script>+<script>
$(document).ready(function()+{
$("input.searchinput").after('<span+class="clearspace"><i+class="clear"+title="clear">&cross;</i></span>');
$("input.searchinput").on('keyup+input',function(){
if+($(this).val())+{$(".clear").addClass("show");}+else+{$(".clear").removeClass("show");}
});
$('.clear').click(function(){
++++$('input.searchinput').val('').focus();
++++$(".clear").removeClass("show");
});
});
</script>
</body>
</html>|code-block|syntax|javascript|658496|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/r5hg42af/2/^0|8|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Something like this??<code>
</code>
<a href="https://jsfiddle.net/r5hg42af/2/" rel="nofollow noreferrer">Jsfiddle Demo</a></p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type="text/css"&gt;
    .searchinput{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
        .clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;input type="text" class="searchinput"&gt;
&lt;/form&gt;
&lt;script src="jquery-1.11.3.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt;
$(document).ready(function() {
$("input.searchinput").after('&lt;span class="clearspace"&gt;&lt;i class="clear" title="clear"&gt;&amp;cross;&lt;/i&gt;&lt;/span&gt;');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.searchinput').val('').focus();
    $(".clear").removeClass("show");
});
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|658498|text|<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+%2B+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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|658499|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;form action="" method="get"&gt;
   &lt;input type="text" name="search" required="required" placeholder="type here" /&gt;
   &lt;input type="reset" value="" alt="clear" /&gt;
&lt;/form&gt;

&lt;style&gt;
   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;
   }
&lt;/style&gt;
</code></pre>


blocks|key|875784|text|您可以使用此命令(不使用Bootstrap)执行此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875785|​|875786|Array.from(document.querySelectorAll('.search-field')).forEach(field+=>+{
++field.querySelector('span').addEventListener('click',+e+=>+{
++++field.querySelector('input').value+=+'';
++});
});|code-block|syntax|javascript|875787|:root+{
++--theme-color:+teal;
}

.wrapper+{
++width:+80%25;
++margin:+0+auto;
}

div+{
++position:+relative;
}

input+{
++background:none;
++outline:none;
++display:+inline-block;
++width:+100%25;
++margin:+8px+0;
++padding:+13px+15px;
++padding-right:+42.5px;
++border:+1px+solid+var(--theme-color);
++border-radius:+5px;
++box-sizing:+border-box;
}

span+{
++position:+absolute;
++top:+0;
++right:+0;
++margin:+8px+0;
++padding:+13px+15px;
++color:+var(--theme-color);
++font-weight:+bold;
++cursor:+pointer;
}
span:after+{
++content:+'\2716';
}|875788|<div+class="wrapper">
++<div+class="search-field">
++++<input+placeholder="Search..."+/>
++++<span></span>
++</div>
</div>|875789|875790|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You can do with this commands (without Bootstrap).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>Array.from(document.querySelectorAll('.search-field')).forEach(field =&gt; {
  field.querySelector('span').addEventListener('click', e =&gt; {
    field.querySelector('input').value = '';
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
  --theme-color: teal;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

div {
  position: relative;
}

input {
  background:none;
  outline:none;
  display: inline-block;
  width: 100%;
  margin: 8px 0;
  padding: 13px 15px;
  padding-right: 42.5px;
  border: 1px solid var(--theme-color);
  border-radius: 5px;
  box-sizing: border-box;
}

span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 0;
  padding: 13px 15px;
  color: var(--theme-color);
  font-weight: bold;
  cursor: pointer;
}
span:after {
  content: '\2716';
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div class="search-field"&gt;
    &lt;input placeholder="Search..." /&gt;
    &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|875813|text|使用简单的绝对定位-这并不难。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875814|jQuery：|875815|​|875816|$('span').click(function(){
++$('input',+$(this).parent()).val('');
})|code-block|syntax|javascript|875817|<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>|875818|875819|香草JS：|875820|875821|var+spans+=+document.getElementsByTagName("span");
function+clickListener(e)+{
++e.target.parentElement.getElementsByTagName("input")[0].value+=+"";
}
for+(let+i+=+0;+i+<+spans.length;+i%2B%2B)+{
++spans[i].addEventListener("click",+clickListener);
}|875822|<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>|875823|875824|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|13|8|@]|9|@]|A|$]]|$1|P|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|H|7|16|8|@]|9|@]|A|$I|J]]|$1|U|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

<p>Use simple absolute positioning - it's not that hard.</p>
<p>jQuery:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('span').click(function(){
  $('input', $(this).parent()).val('');
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div style="position:relative; width:min-content;"&gt;
  &lt;input&gt;
  &lt;span style="position:absolute;right:10px"&gt;x&lt;/span&gt;
&lt;/div&gt;
&lt;div style="position:relative; width:min-content;"&gt;
  &lt;input&gt;
  &lt;span style="position:absolute;right:10px"&gt;x&lt;/span&gt;
&lt;/div&gt;
&lt;div style="position:relative; width:min-content;"&gt;
  &lt;input&gt;
  &lt;span style="position:absolute;right:10px"&gt;x&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Vanilla JS:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var spans = document.getElementsByTagName("span");
function clickListener(e) {
  e.target.parentElement.getElementsByTagName("input")[0].value = "";
}
for (let i = 0; i &lt; spans.length; i++) {
  spans[i].addEventListener("click", clickListener);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position:relative; width:min-content;"&gt;
  &lt;input&gt;
  &lt;span style="position:absolute;right:10px"&gt;x&lt;/span&gt;
&lt;/div&gt;
&lt;div style="position:relative; width:min-content;"&gt;
  &lt;input&gt;
  &lt;span style="position:absolute;right:10px"&gt;x&lt;/span&gt;
&lt;/div&gt;
&lt;div style="position:relative; width:min-content;"&gt;
  &lt;input&gt;
  &lt;span style="position:absolute;right:10px"&gt;x&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|658594|text|在设计模式下将文本框类型更改为“”搜索“”，或者|type|unstyled|depth|inlineStyleRanges|entityRanges|data|658595|<input+type="search">|code-block|syntax|javascript|658596|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Change the text box type as 'search' in the design mode or</p>
<pre><code>&lt;input type=&quot;search&quot;&gt;
</code></pre>


<p>Is there a quick way to create an input text element with an icon on the right to clear the input element itself (like the google search box)?</p>

<p>I looked around but I only found how to put an icon as background of the input element. Is there a jQuery plugin or something else?</p>

<p>I want the icon inside the input text element, something like:</p>

<pre><code>--------------------------------------------------
|                                               X|
--------------------------------------------------
</code></pre>


Clear icon inside input text

容器

jQuery

有没有一种快速的方法来创建一个输入文本元素，在右边有一个图标来清除输入元素本身(就像google搜索框一样)？我环顾四周，但我只找到了如何将图标作为输入元素的背景。有没有jQuery插件或者别的什么？我想要输入文本元素中的图标，如下所示：-----------------------------------------...

问清除输入文本中的图标
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问清除输入文本中的图标EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问清除输入文本中的图标
EN