Create cross(X) sign that is use for cancle writeted text in textbox_

Question

I have used the below code is working fine but instead of an HTML controller, I have to use the asp.net text box controller. input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }

Sachin Singh · Answer

then copy paste this and run "http://www.w3.org/1999/xhtml" > "server" > clearable textbox with jquery plugin "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > "jquery.clearableTextField.js" type= "text/javascript" > "text/javascript" > $(document).ready(function() { $( '#txtName' ).clearableTextField(); }); "text/css" > div.text_clear_button { background:url(clear_cross.png); width:11px; height:11px; margin:0; padding:0; z-index:2; position:absolute; cursor:pointer; } div.form {margin:10px; padding:20px; background:#eee;} "form1" runat= "server" > class = "form" > for = "Name" >Enter Text Here : "txtName" runat= "server" />

Sachin Singh · Answer

do it as step 1 "TextBox1" runat= "server" placeholder="Search..."CssClass= "form-control" > step 2. jquery $(function(){ $( ' ' ).attr( "type" , "search" ); }); step 3. Css input[type= "search" ]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }

Pradeep Rawat · Answer

Hi Sachin, code is working but has to add the extra plugin . can we do the same thing using CSS ?

Pradeep Rawat · Answer

HI Sachin, its not working..

Pradeep Rawat · Answer

Thanks for the reply. but I don't think so what you replied that is not my requirement. actually textbox( ) is showing with cross sign for cancel the text in IE, but it's not showing in chrome . so I want the same feature in chrome but using CSS or bootstrap. I hope now it's clear. (attached screenshot)

Pranam Bhat · Answer

$(".addButton").click(function () { if (counter > 10) { alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('span')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().append('Textbox' + counter + ' '" id="courseId' + counter + '" value="" >'); newTextBoxDiv.appendTo("#course"); counter++; });