[CSS][MEDIO] Personalizar los inputs y parecidos

Xt3mP · Enero 25, 2011, 08:44:37 AM

A veces nos encontramos con que tenemos que hacer alguna página web y al momento de crear algún formulario nos vemos en una situación en donde no nos agrada el estilo del formulario, pues enhorabuena, css es la solución para personalizar y mejorar el estilo de estos inputs y parecidos.

Primero explicaré que CSS son las hojas de estilo que nos permiten mejorar "el estilo" (valga la redundancia) del contenido del sitio web y este viene de la mano de HTML por lo que en realidad no es un lenguaje pero trabaja como tal ya que tambien tiene su síntaxis para que los estilos se adapten correctamente.

En este caso tomaré de referencia que ya tienen los conceptos básicos de CSS (si no, descargarse DreamWeaver y crear un documento CSS y al dar "intros" se les irá apareciendo los comandos del CSS) así que comenzarémos con diferenciar para que "targets" iran nuestros css.

#estilo = Al indicar un "#" al inicio indicamos que es un ID. (<div id="xt3mp"></div> por lo que daría en el CSS: #xt3mp {...}).
.estilo = Al indicar un "." al inicio indicamos que es una clase. (<div class="xt3mp"></div> por lo que daría en el CSS: .xt3mp{...}).
estilo = Al no indicar que se trata de un id o una clase, el CSS tomará como referencia los atributos ó mejor dicho, las etiquetas ya preterminadas como lo son body, table, input, textarea, select, th, td, etc, es decir, las que no les agregamos CSS en el HTML pero que aún así existen, en este caso un input sin estilo simplemente sería:

Código: html5


<input type="text" name="sin_css" value="Casilla sin CSS">

Como notamos, en este caso seria "input{..}", así que de ahi partirémos.

Creamos un nuevo documento o en el mismo archivo HTML del formulario agregamos las etiquetas: <style type="text/css"></style> para indicar que se trata de CSS, pondre primero el CSS y luego explicaré que hace cada cosa:

Código: css


input{ /* Al solo poner input sin # ni . indicamos que afecte a todos los input del sitio web */
-moz-border-radius: 3px; /* Con esto hacemos un redondeo en los bordes para que no se mire cuadrado */
background-color: #003300; /* Con esto indicamos el color de fondo */
border: 1px solid #CCFF00; /* Con esto indicamos el size del borde, el estilo (thin, solid, etc) y el color del borde */
color: #379A8D; /* Con esto indicamos el color del contenido */
font-family: Verdana; /* Con esto indicamos la fuente de letra */
font-size: 10px; /* Con esto indicamos el size de letra */
margin: 3px; /* Con esto definimos el espacio afuera del borde */
padding: 3px; /* Con esto definimos el espacio entre el borde */
} 
input:hover{ /* Al poner :hover indicamos que afecte a los input al pasar el mouse sobre dichos input*/
background-color: #00CC33; /* Con esto indicamos el color de fondo */
border: 1px solid #CCFF00; /* Con esto indicamos el size del borde, el estilo (thin, solid, etc) y el color del borde */
color: #F2F2F2; /* Con esto indicamos el color del contenido */
}

Ya con esto nuestros input quedarian muy lindos, si quieren que no solo afecte a los input si no que tambien a otros, seria:

Código: css


input, textarea, select, #ID, .clase{...} /* En donde separamos por "," lo que afectara */

Si no queremos que afecte a todos los input hacemos un CSS asi:

Código: css


.clase{ /* Al poner . indicamos que afecte a todo lo que tenga la clase "clase" */
-moz-border-radius: 3px; /* Con esto hacemos un redondeo en los bordes para que no se mire cuadrado */
background-color: #003300; /* Con esto indicamos el color de fondo */
border: 1px solid #CCFF00; /* Con esto indicamos el size del borde, el estilo (thin, solid, etc) y el color del borde */
color: #379A8D; /* Con esto indicamos el color del contenido */
font-family: Verdana; /* Con esto indicamos la fuente de letra */
font-size: 10px; /* Con esto indicamos el size de letra */
margin: 3px; /* Con esto definimos el espacio afuera del borde */
padding: 3px; /* Con esto definimos el espacio entre el borde */
} 
.clase:hover{ /* Al poner :hover indicamos que afecte a todo lo que tenga la clase "clase" al pasar el mouse sobre dichos input*/
background-color: #00CC33; /* Con esto indicamos el color de fondo */
border: 1px solid #CCFF00; /* Con esto indicamos el size del borde, el estilo (thin, solid, etc) y el color del borde */
color: #F2F2F2; /* Con esto indicamos el color del contenido */
}

En donde clase es el nombre de su clase, ahora el input sería:

Código: html5


<input type="text" name="concss" class="clase">

Demo: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
P.D. Cabe mencionar que en el DEMO en la parte que dice Con CSS en hover: lo puse así para que vean la diferencia en que sucede al pasar el mouse, lo demas tienen el mismo estilo, saludos.

arthusu · Mayo 15, 2011, 04:04:06 AM

si quedan mejor

[CSS][MEDIO] Personalizar los inputs y parecidos

Xt3mP

Enero 25, 2011, 08:44:37 AM Ultima modificación: Mayo 03, 2014, 05:42:24 PM por Destructor.cs

arthusu

Mayo 15, 2011, 04:04:06 AM #1