comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[CSS][MEDIO] Personalizar los inputs y parecidos

  • 1 Respuestas
  • 1362 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Xt3mP

  • *
  • Underc0der
  • Mensajes: 432
  • Actividad:
    0%
  • Reputación 0
  • Ellos me están buscando, pero yo los encontraré.
    • MSN Messenger - Xt3mP@h4x0rz.us
    • AOL Instant Messenger - Xt3mP@h4x0rz.us
    • Yahoo Instant Messenger - Xt3mP@h4x0rz.us
    • Ver Perfil
    • Xt3mP
« en: 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
  1. <input type="text" name="sin_css" value="Casilla sin CSS">
  2.  

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

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
  1. input, textarea, select, #ID, .clase{...} /* En donde separamos por "," lo que afectara */
  2.  

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

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

En donde clase es el nombre de su clase, ahora el input sería:
Código: HTML5
  1. <input type="text" name="concss" class="clase">
  2.  
Demo: http://xt3mp.info/demos/personalizando_formulario.html
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.
« Última modificación: Mayo 03, 2014, 05:42:24 pm por Destructor.cs »
Cada vez que me das Karma me motivas

Desconectado arthusu

  • *
  • Underc0der
  • Mensajes: 552
  • Actividad:
    3.33%
  • Reputación 2
  • Yo solo se que no se nada - Socrátes
    • Ver Perfil
    • Arthusu BLOG
  • Skype: arthusuxD
« Respuesta #1 en: Mayo 15, 2011, 04:04:06 am »
si quedan mejor  :P
Pentest - Hacking & Security Services

Contact me: arthusu@gmail.com

 

¿Te gustó el post? COMPARTILO!



[JavaScript][MEDIO] Menu 'Mac' en Javascript

Iniciado por @ed33x

Respuestas: 0
Vistas: 1012
Último mensaje Enero 21, 2011, 11:54:30 am
por @ed33x
[JavaScript][MEDIO] Texto que aparece palabra por palabra

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1131
Último mensaje Febrero 24, 2010, 11:16:49 am
por ANTRAX
[JavaScript][MEDIO] Script ''cambia el color letra a letra''

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1346
Último mensaje Febrero 24, 2010, 11:14:30 am
por ANTRAX
[HTML][MEDIO] Crea un banner con luces LED para tus perfiles con Mint Profile

Iniciado por godmurdoc

Respuestas: 0
Vistas: 1399
Último mensaje Julio 04, 2011, 04:04:02 pm
por godmurdoc
[HTML][MEDIO] Crear un reproductor de música utilizando HTML5

Iniciado por alexander1712

Respuestas: 0
Vistas: 1246
Último mensaje Enero 26, 2013, 02:22:28 am
por alexander1712