CSS para formularios

He encontrado una página donde nos cuentan distintas posibilidades para dar un aspecto más atractivo a nuestros formularios mediante el uso de CSS viendo cómo quedan en distintos navegadores.

Este es un resumen de los estilos que he visto bien en distintos navegadores.

KAO: No incluye los diferentes elementos select o drop-down box y sus opciones y grupos de opciones por los problemas que dan.

OK : No se incluyen los cuadros de texto tanto los de una linea las múltiples lineas por no encontrar problemas de CSS.

Botones


#el07 {font-family:"Courier New",Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:1em} /* Increase padding */

#el07
#el08
#el10
#el011

Checkbox y Radio buttons

#el04 {border-width:6px} /* Border width */
#el06 {border:none} /* No border */

#el04

#el06

Disabled

[disabled] { /* Text and background colour, medium red on light yellow */
color:#933;
background-color:#ffc;
}

Button

Multi-line text input

Fieldset y Legends

#el04 {border-width:6px} /* Border width */
#el06 {border:none} /* No border */
#el07 {font-family:”Courier New”,Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:2em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */
fieldset p {margin:0}

#el04

Some text.

#el06

Some text.

#el07

Some text.

#el08

Some text.

#el09

Some text.

#el10

Some text.

#el11

Some text.

#el12

Some text.

Para legend los CSS que he visto mejor son:

fieldset {position:relative} /* For legend positioning */
#el01 legend {padding:0} /* Remove padding */
#el02 legend { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd;
}
#el04 legend {margin:0} /* Remove margin */
#el05 legend {border:2px dotted #00f} /* Border width, style and colour */
#el07 legend {font-family:”Courier New”,Courier} /* Different font */
#el08 legend {font-size:2em} /* Bigger text */
#el10 legend {font-weight:bold} /* Bold text */
#el11 legend {padding:2em} /* Increase padding */

File select

#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */

En este caso para que se vea bien en safari mejor poner un padding o line-height.

Más información

Puedes verificar cómo quedan en otros navegadores en el post original en inglés.

3 Comments

Leave a Comment

Username (required) :
Email (required) :
Web Site :
Comment :

Additional comments powered by BackType