Campos de formulario con bordes redondeados
Se trata de dar un aspecto más agradable a los formularios de un modo bastante sencillo.
Para ello necesitaremos tres imágenes que actuarán de fondo para tres capas. Estas imágenes son:
para el lado izquierdo del formulario
para el aldo derecho del campo de formulario
para el cuerpo del campo del formulario.
Del resto se va a encargar la hoja de estilos. Por un lado posicionando las tres imágenes mediante la propiedad float (clases ladoizquierdo, campo y ladoderecho), y por otro eliminando los bordes de las etiquetas input mediante la clase input.ejemploform .
El resultado final es el siguiente:
Y el código fuente es el que aparece a continuación:
Hoja de estilos
form.ejemploform {
background: #DAE6FA;
font-family: verdana, helvetica, sans
serif;
color: #666;
padding:10px;
border: 1px dotted #6FA2F7;
}
.enunciado {
width:40%;
margin-top:10px;
margin-bottom: 10px;
padding-right:10px;
float:left;
}
.campo {
margin-top:10px;
margin-bottom: 10px;
float:left;
background-image:url('cuerpoinput.gif');
background-repeat:repeat-x;
}
.ladoizquierdo {
margin-top:10px;
margin-bottom: 10px;
width:6px;
background-image:url('ladoizquierdo.gif');
float: left;
height:24px;
background-repeat:no-repeat;
}
.ladoderecho {
margin-top:10px;
margin-bottom: 10px;
width:5px;
background-image:url('ladoderecho.gif');
float: left;
height:24px;
background-repeat:no-repeat;
}
.clear {
clear:both;
}
label.ejemploform {
font-size:90%;
}
input.ejemploform {
border:0px;
height: 24px;
background:none;
font-size:70%;
color:#666A72;
padding-top:5px;
}
Formulario
<form method="get" action="ninguna.php"
name="formulario" class="ejemploform">
<div class="enunciado"><label
class="ejemploform">Nombre y apellidos</label>
</div>
<div class="ladoizquierdo"></div>
<div class="campo">
<input class="ejemploform" size="30"
name="nombre"></div>
<div
class="ladoderecho"></div>
<div class="clear"></div>
<div class="enunciado"><label
class="ejemploform">Dirección</label>
</div>
<div
class="ladoizquierdo"></div>
<div class="campo">
<input class="ejemploform" size="30"
name="direccion"></div>
<div
class="ladoderecho"></div>
<div class="clear"></div>
<div class="enunciado"><label
class="ejemploform">Correo
electrónico</label>
</div>
<div
class="ladoizquierdo"> </div>
<div class="campo">
<input class="ejemploform" size="30"
name="email"></div>
<div
class="ladoderecho"></div>
<div class="clear"></div>
<div class="enunciado"><label
class="ejemploform">Teléfono</label>
</div>
<div
class="ladoizquierdo"></div>
<div class="campo">
<input class="ejemploform" size="15"
name="telefono"></div>
<div
class="ladoderecho"></div>
<div class="clear"></div>
</form>
