This is a quick and dirty example of how to make a mobile friendly text box clearable. This could easily be turned into a jquery plugin.
HTML:
<div class="ui-input"> <input name="firstname" type="text" id="firstname" placeholder="First Name"> <span class="ui-icon-delete"></span> </div> <div class="ui-input"> <input name="lastname" type="text" id="lastname" placeholder="Last Name"> <span class="ui-icon-delete"></span> </div>
jQuery Code:
$(function(){ $("input").focus(function(){ $(this).parent().addClass("ui-focus"); $(this).parent().find(".ui-icon-delete").show(); }); $("input").blur(function(){ $(this).parent().removeClass("ui-focus"); }); $(".ui-icon-delete").click(function(){ $(this).parent().find("input").val(""); $(this).hide(); }); });
CSS:
input{ width:86%; padding: 7px 0 7px 5px; line-height: 1.4; font-size: 14px; border:none; outline: 0 !important; margin-left:5px; } #form{ margin:10px auto; padding:10px; } .ui-input{ -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); position: relative; border: 1px solid #CCC; color: #333; text-shadow: 0 1px 0 white; background: white; border-radius:10px; background-clip: padding-box; margin-bottom:10px; } .ui-focus{ -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 25, 288, 0.3); box-shadow: 0px 0px 3px 2px rgba(0, 93, 288, 0.3); } .ui-icon-delete{ padding: 0; margin: 0; background: rgba(0, 0, 0, 0.398438) url(icons-18-white.png) -72px 50%; background-position: -72px 50%; background-size: 776px 18px; display:none; float:right; border:solid #fff 2px; width:18px; height:18px; position:relative; top:8px; right:8px; border-radius:20px; box-shadow: 0px 0px 3px 2px rgba(000, 000, 000, 0.2); cursor:pointer; }