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>