Estilitzar Formularis

Aquest article aborda només el que es pot aconseguir amb CSS i els formularis. Es pot aplicar gairebé qualsevol ordre de CSS a un element de formulari, de manera que l'únic límit és la teva imaginació.

El formulari (xhtml)

<form action="#">
<fieldset>
<legend>This is my form</legend>
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /><br /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</fieldset>
</form>

Posant estil amb CSS

label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input
{
margin-left: 4.5em;
} 
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
} 
fieldset
{
border: 1px solid #781351;
width: 20em
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}