Un ejemplo del poder que proporciona el uso de CSS en la presentación de formularios. A continuación el código utilizado:
form.estilo fieldset {
border:3px solid black;
background: #93b1c9;
padding: 0.8em;
font:80%/1 sans-serif;
}
form.estilo legend {
text-align: center;
background: #5b6d7c;
padding: 10px 5px;
border:1px solid black;
color: #93b1c9;
font-size:90%;
font-weight:bold;
}
form.estilo label {
float:left;
width:40%;
color: #5b6d7c;
margin-right:20px;
padding-top: 3px;
text-align:right;
font-weight:bold;
}
form.estilo input {
color: black;
border-top: solid 1px black;
border-left: solid 1px black;
border-bottom: solid 1px white;
border-right: solid 1px white;
background: #5b6d7c;
}
.boton {
background: #93b1c9 !important;
color: #5b6d7c !important;
border-top: solid 1px white !important;
border-left: solid 1px white !important;
border-bottom: solid 1px black !important;
border-right: solid 1px black !important;
font-weight: bold;
margin-top: 10px;
margin-left: 45%;
}
No existe una clase especial para los botones, así que hay que asignarles una. Los !important son necesarios allí dónde se contradice lo que se ha definido para los input con los que comparten estilo.
En Internet Explorer, el color de fondo del fieldset se sale de su borde y envuelve el legend.
A Petr Stanicek (-pixy-) por compartir lo que sabe.