Los formularios se pueden mejorar mucho con los estilos CSS
...
Modificando los input campos de entrada
Con solo modificando algunos estilos podemos cambiar la forma de mostrar e ver nuestros campos de entrada inputs
El input si le ponemos el atributo width podemos cambiar su ancho
ejemplo
ejemplo
- input[type=text]- solo seleccionará campos de texto
- input[type=password]- solo seleccionará campos de contraseña
- input[type=number]- solo seleccionará campos numéricos
- etc
Entradas rellenadas
El ejemplo anterior muestra una entrada tal como html la proporciona, pero nuesotros le podemos dar algunos estilos mas como por ejemplo el relleno de la entrada
para eso usamos el atributo padding:
Este atributo, se agranda conforme el valor de pixeles que le pongamos
Ejemplo
Sugerencia: cuando tiene muchas entradas una tras otra, es posible que también quiero agregar algunos margin, para agregar más espacio fuera de ellos:
Ejemplo
Nota: Si ponemos "width:100%", en la entrada, vamos a obtener una entrada que tiene el 100% de ancho, absoluctos
Pero como yo he puesto la entrada dentro de un div (caja) tube que incluir una otra propriedad como es la box-sizing: border-box; para que la entrada no se salga del div
Entradas bordeadas
Con la propriedad border podemos tambien poner un border a nuestras entradas
El color depende de la propriedad que le pongas (red, green, yelloW, etc) el grosor depende tambien de la propriedad (1px, 2px, 3px, etc)
Ejemplo
Entradas Redondeadas
Tambien poniendo una propriedad mas como es: border-radius podemos redondear las esquinas de las entradas
El grado de redondeamento va depender del valor que le deamos en pixels a la propriedad
Ejemplo
Entradas coloreadas
Con la propriedad background-color podemos colorear el fondo de las entradas
Ejemplo
Entradas enfocadas
De manera predetrminada algunos navegadores agregan un borde de color cuando una entrada recibe el enfoque
Cuando ponemos nuestro mouse en una entrada e la selecionamos dando clic en esa entrada, la estamos enfocando
Se puede eliminar este comportamento ponendo el atributo outline: none;
El atributo es outline: el valor es none;
Pero podemos hacer otros efectos, cuando una entrada recibe el focus como por ejemplo cambiar el color al fondo
Ejemplo
Entrada con icono/imagen
Para poner un icono a una entrada con CSS usaremos el atributo:valor seguiente background-image:url('')
Lo posicionamos por ejemplo a la esquierda con el seguiente atributo/valor background-position: 10px 10px;
E por ultimo usamos un relleno a la esquierda para reservar lugar al icono padding-left:40px
Ejemplo
Areas de texto
Las areas de texto textarea se redifinen por defecto, o sea cuando ponemos una area de texto en nuestro proyecto ella se agranda dependiendo del texto si es mas largo o mas corto
Para evitar ese redimensionamiento le ponemos el atributo resize:none y desabilitamos el "capturador" en la esquina inferior derecha
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias