Formato inicial del formulario CSS

Código CSS que le da un formato básico a los elementos de mi formulario CSS.

Nota: ver un formulario HTML de ejemplo.

/*
Hoja de estilos Formularios general
Última edición: 2006-08-XX
================================================*/

/* Estructura
================================================*/
* {
margin: 0;
padding: 0;
}
form {
position:relative;
overflow:hidden;
margin:0;
/*padding:.5em .5em .5em .5em;*/
}
form fieldset {
position:relative;
border-top: 1px solid #000000;
border-style: solid none none none;
padding: 1em;
}
form fieldset legend { font-size: 130%; padding: 0 .5em; }
form fieldset div {
position:relative;
overflow:hidden;
display: block;
width: 65%;
overflow:hidden;
}
form fieldset div label {
position:relative;
display: block;
float:left;
width:35%;
padding: 3px 5px;
margin: 0 .5em 0 0;
_margin: 0 .2em 0 0;
text-align: right;
}
/*form fieldset div.required label {
font-weight:bold;
}*/

* Campos
================================================*/
input, select, textarea {
padding: 0em .2em;
_padding-bottom: .05em;
width: 56%;
}
textarea { overflow: auto; }

/* Bloques radio, checkbox, etc.
================================================*/

/* contenedor derecho para listas de controles radio, checkbox, etc. */
form fieldset div div {
position:relative;
float:right;
margin: 0 .9em 0 0em;
_margin: 0 .7em 0 .2em;
width: 56.2%;
_width: 56.5%;
padding-top: .2em;
padding-bottom: .2em;
border:1px solid silver;
}
form fieldset div div label {
padding: .3em .1em;
_padding: .1em .1em;
float:left;
text-align:left;
width:90%;
}
form fieldset div div label input {
margin:0 .2em;
}
input.file {
margin:0;
padding:0;
width: 61%;
_width: 58.5%;
}
input.checkbox, input.radio {
display: inline;
width: 1.5em;
background-color: transparent;
border: none;
}
input.button {
float:none;
background-color: #D4D0C8;
font-family:Arial, Helvetica, sans-serif;
}

/* Ayuda
================================================*/
form fieldset div.notes {
position:relative;
float: right;
width: 27%;
margin: 0 0 1em 0em;
_margin-top:.2em;
padding: .5em .5em .5em .8em;
border: 1px solid #666666;
background-color: #ffffe1;
color: #666666;
}
form fieldset div.notes h4 {
background-image: url('../../images/icon_info.gif');
background-repeat: no-repeat;
background-position: left top;
border-bottom: 1px solid #666666;
margin-bottom: .5em;
font-size: 100%;
padding-left:27px;
padding-right:0;
padding-top:0;
padding-bottom:3px;
}

form fieldset div.notes p { font-size: 85%; }
form fieldset div.notes p.last { margin-bottom: 0em; }
form div small {
display: block;
margin-left: 39%;
margin-right: 3%;
padding: .1em .3em;
height: expression('1%');
font-size: 80%;
font-style:italic;
color: #666666;
}
form div small p{
font-style:italic;
color: #666666;
}
form div small a:visited {
color: #0033CC;
}
form div small a {
font-size:110%;
color: #0033CC;
}

* Submit
================================================*/
div.submit {
width:100%;
text-align:center;
margin-top:1em;
}
div.submit * {
margin: 0 .5em;
}

/* Validación de formulario
================================================*/
.required { background-color: #FFFFCC; }
.error { border: 2px solid #DDA3A3; }
.errFld { border: 2px solid #DDA3A3; }
.errorMsg { color: #CC3333; display: inline; }
.errMsg {
color: #CC3333;
display: block;
border:none;
margin-left: 25.5%;
margin-right: 3%;
padding: .1em .3em;
font-size:80%;
}
Guarda   |   Imprime   |   Recomienda
  • email
  • Print
  • PDF
  • RSS
  • Google Bookmarks
  • Technorati
  • Meneame
  • Digg
  • TwitThis
  • MySpace
  • Yahoo! Bookmarks
  • del.icio.us
  • Facebook
  • Bitacoras.com
  • Live
  • StumbleUpon
  • Wikio
  • Netvibes
  • BarraPunto

Otros artículos de esta serie:

Publicar un Comentario

Si es la primera vez que escribes, tu comentario será moderado por un administrador.

Con el fin de garantizar un ambiente de debate respetuoso, no se permitirán comentarios:

  • insultantes, difamatorios, racistas, sexistas, y/o discriminatorios
  • excesivamente críticos con otros participanes
  • que no aporten nada, sin sentido o repetidos
  • con enlaces considerados publicidad o spam
  • con material protegido por derechos de autor
*
*