<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Suchformular mit CSS3</title>
<style type="text/css">
body {
background-color: #eee
}
.searchform {
width: 155px;
margin: 50px;
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #ddd;
padding: 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #aaa;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
background: -moz-linear-gradient(top, #eee, #999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc'); /* ie8 */
}
.searchform input {
font-size: .8em;
}
.searchform .searchfield {
background: #fff url(/images/lupe.png) 4% 60% no-repeat;
padding: 5px 0 5px 20px;
width: 100px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
*html .searchform .searchfield {width: 90px;}
*+html .searchform .searchfield {width: 90px;}
.searchform .searchfield:focus,
.searchform .searchfield:hover{
outline:none;
border-color:rgba(25,25,25,.5)!important;
-moz-box-shadow:0 0 8px rgba(25,25,25,.5);
-webkit-box-shadow:0 0 8px rgba(25,25,25,.5);
box-shadow:0 0 8px rgba(25,25,25,.5);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #666;
padding:0 0 3px 0;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #777;
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#222));
background: -moz-linear-gradient(top, #ddd, #333);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#333333'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#333333'); /* ie8 */
}
.searchbutton:hover,
.searchbutton:focus {
cursor:pointer;
color:#333;
text-shadow: 0 1px 1px rgba(255,255,255,.6);
background: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#666));
background: -moz-linear-gradient(top, #eee, #666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#666666'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#666666'); /* ie8 */
}
/* Label nur für Screen Reader sichtbar machen: */
label {
position:absolute;
left:-9000px;
overflow:hidden;
display:inline;
}
</style>
</head>
<body>
<form class="searchform" method="get" action="">
<div>
<label for="such">Auf diesen Seiten suchen:</label>
<input onfocus='if(this.value=="Suchbegriff")this.value=""' onblur='if(this.value=="")this.value="Suchbegriff"' class="searchfield" name="such" id="such" value="Suchbegriff" size="13" title="Suchbegriff hier eingeben" type="text" />
<input class="searchbutton" type="submit" value="Go" />
</div>
</form>
</body>
</html>