/* div container containing the form  */
#searchContainer {
	margin:20px;
	}

/* Style the search input field. */
#field {
	float:left;
	width:445px;
	height:35px;
	line-height:27px;
	text-indent:10px;
	font-family:arial, sans-serif;
	font-size:1.5em;
	color:#333;
	background: #fff;
	border:solid 1px #d9d9d9;
	border-top:solid 1px #c0c0c0;
	border-right:none;
	border-radius: 10px 0px 0px 10px;
	
}

/* Style the "X" text button next to the search input field */
#delete {
	float:left;
	width:20px;
	height:35px;
	line-height:29px;
	margin-right:15px;
	padding:0 10px 0 10px;
	font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
	font-size:22px;
	background: #fff;
	border:solid 1px #d9d9d9;
	border-top:solid 1px #c0c0c0;
	border-left:none;
	border-radius: 0px 8px 8px 0px;
}
/* Set default state of "X" and hide it */
#delete #x {
	color:#A1B9ED;
	cursor:pointer;
	display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
	color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
	cursor:pointer;
	width:70px;
	height: 36px;
	line-height:0;
	font-size:0;
	text-indent:-999px;
	color: transparent;
	background: url(ico-search.png) no-repeat #4d90fe center;
	border: 1px solid #00B4F0;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 3px 3px 3px 3px;
}
/* Style the search button hover state */
#submit:hover {
	background: url(ico-search.png) no-repeat center #357AE8;
	border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

/* chemstep */
.textbox {
	/*margin: 0; 
	border: 2px solid #CCC; 
	background: #FFF;
	color: #333; 
	width: 417px;
	height: 50px;*/
	position: absolute;
	padding-left:180px;
	/*right: 495px;*/
}

/*chemstep*/
.content {
    display: block;
    /*padding: 20px;*/
    position: relative;
	/*padding-left: 15px;*/
}

.content .system.info {
   /* background: url("images/icon-info.png") no-repeat scroll 10px 7px #C1DAFC; */
    background:  #C1DAFC;
	border: 1px solid #7CA7E1;
    color: #2065C3;
	border-radius: 2px 2px 2px 2px;
	width:540px;
}

.content .system {
    display: block;
   /* font: 10px/1.6em; */
   margin: 0 0 5px; 
    padding: 3px 0px 3px 6px;
}


<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$().ready(function() {
	// if text input field value is not empty show the "X" button
	$("#field").keyup(function() {
		$("#x").fadeIn();
		if ($.trim($("#field").val()) == "") {
			$("#x").fadeOut();
		}
	});
	// on click of "X", delete input field value and hide "X"
	$("#x").click(function() {
		$("#field").val("");
		$(this).hide();
	});
});