HiI need a code for displaying a clear icon inside my text box and removing the default clear icon inside text box However i will remove it Please help me in thisBelow is the html code lthtmlgtltheadgtlttitlegtSample pagelttitlegtltheadgtltbodygtltformgtlttable class34innertable34gtlttrgtlttd valign34top34 align34left34gtlttablegtlttrgt lttdgtltinput name34S1aa134 value34134 type34checkbox34

Display icon inside TextBox using CSS in ASP.Net

sravan93

SOLVED CLOSED ACTIVE ANSWERED
User: sravan93
Posted: on Jun 02, 2017 01:43 AM
Forum: HTML and CSS
Answer: 1
Views: 9104

Hi,

I need a code for displaying a clear icon inside my text box and removing the default clear icon inside text box. However i will remove it. Please help me in this.

Below is the html code:

<html><head><title>Sample page</title></head><body><form><table class="inner_table"><tr><td valign="top" align="left">
<table>
<tr>
 <td><input name="S1aa_1" value="1" type="checkbox" id="S1aa_1"></td>
 <td><label for="S1aa_1">Speaker program</label></td>
 </tr>
 <tr>
 <td><input name="S1aa_2" value="1" type="checkbox" id="S1aa_2"></td>
 <td><label for="S1aa_2">Company sponsored scientific meetings</label></td>
 </tr>
 <tr>
 <td><input name="S1aa_3" value="1" type="checkbox" id="S1aa_3"></td>
 <td><label for="S1aa_3">Dinner meeting</label></td>
 </tr>
 <tr>
 <td><input name="S1aa_4" value="1" type="checkbox" id="S1aa_4"></td>
 <td><label for="S1aa_4">Online events (e.g. webinars)</label></td>
 </tr>
 <tr>
 <td><input name="S1aa_5" value="1" type="checkbox" id="S1aa_5"></td>
 <td><label for="S1aa_5">Networking events</label></td>
 </tr>
 <tr>
 <td><input name="S1aa_6" value="1" type="checkbox" id="S1aa_6"></td>
 <td><div><label for="S1aa_6">Interactions with Medical Science Liaisons</label></td>
 </tr>
 <tr>
 <td><input name="S1aa_7" value="1" type="checkbox" id="S1aa_7"></td>
 <td><table><tr><td><label for="S1aa_7">Other (Please specify)&nbsp</label></td><td><input type="text" class="open_end_text_box text_input" name="S1aa_7_other" maxlength="100" id="S1aa_7_other"></td></tr></table></td>
 </tr>
 </table>
</form>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

Andrea

0 1

Reply
ANSWER
User: Andrea
Replied: on Jun 02, 2017 01:43 AM
Report

Hi @sravan93, Please try the following Display Calendar Icon inside TextBox for DatePicker TextBox using CSS It might help you. Cheers Andrea.

sravan93

0 2

Reply
User: sravan93
Replied: on Jun 02, 2017 02:21 AM
Report

Hi Andrea,

Thank you for that code:)

This code is exactly but i want the clear icon only when the text enters into the text box, i have tried the below code but when i placed in my tool the padding-bottom is different in chrome but is working fine in IE and Mozilla. Please find the below jquery code and css code. for that.

            $("#S1aa_7_other").addClass("clearable x");
			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();
	$("#S1aa_7_graphical").attr('class','graphical_select checkbox');
		SSI_SetSelect("S1aa_7", false);
});

<style type="text/css">
.clearable{
  background: #fff url('[%GraphicsPath()%]cross.bmp') no-repeat right -10px center;
  border: 1px solid #999;
  width: 160px;
  padding: 5px 17px 5px 4px;
}
.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 */
</style>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display icon inside TextBox using CSS in ASP.Net

Company

Explore

Follow us

Contact Us