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;
		}

View Demo