CSS:
fieldset{
background: url(../_img/form_bg.gif) no-repeat 0 0;
width: 340px;
padding: 5px 0 10px 10px;
border: 0;
font-family: verdana;
}
legend{
color: #999;
font-weight: bold;
padding: 4px 6px 4px 0;
margin: 0 0 5px 0;
font-size: 0.8em;
}
label{
width: 100px;
float: left;
padding: 2px 0 0 0;
}
input{
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: transparent;
width: 200px;
}
select{
margin: 2px 0 15px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: transparent;
}
.button{
background-color: transparent;
color: #000;
font-weight: bold;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
float: right;
}
/* begin hack \*/
* html .button{
padding: 0;
}
* html legend{
margin-left: -5px;
}
/* einde hack */
HTML:
<form name="personalia" action="" method="post">
<fieldset>
<legend>persoonlijke gegevens</legend>
<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" /><br />
<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" /><br />
<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" /><br />
<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select><br />
<input class="button" type="submit" name="submit" value="cook!" />
<input class="button" type="reset" name="reset" value="wissen" />
</fieldset>
</form>
RESULTAAT: