You can do something like this:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#form1 {
padding:20px;
background:#fcf;
width:520px;
overflow:hidden;
}
#form1 label, #form1 input {
float:left;
padding:0 10px 0 0;
}
#search{
width:300px;
height:35px;
line-height:35px;
background:#fff;
border:1px solid #000;
margin:0;
border-right:none;
font-weight:bold;
}
#go{
text-transform:uppercase;
width:50px;
height:37px;
line-height:27px;
background:#fcc;
border:1px solid #000;
margin:0;
text-align:center;
}
#form1 label {
width:100px;
text-align:right;
padding:0 10px 0 0;
line-height:37px;
font-weight:bold;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<fieldset>
<legend>Search</legend>
<label for="Search">Search:</label>
<input type="text" name="Search" id="search">
<input type="submit" name="Go" id="go" value="Go">
</fieldset>
</form>
</body>
</html>
If you need an image for the submit button then apply a background image to it instead of the text like this.
Code:
#go{
text-transform:capitalise;/* ie hack to make text-indent work*/
text-indent:-999em;
width:50px;
height:37px;
line-height:27px;
background:url(go.gif) no-repeat 0 0;
border:1px solid #000;
margin:0;
text-align:center;
}
Obviously text-indent is not the most accessible method of hiding text but other methods of image replacement will require extra elements where inputs are concerned. The text-indent allows the input value to stay in place for accessibility. Of course if images are missing you get nothing unlike the link I just posted above.
A word of warning though in that form controls differ wildly cross browser and usually its best not to force them into tight spaces as text-resize or browser differences can break then quite easily.
Posting Permissions
Reply With Quote
Bookmarks