Propiedad box-sizing

La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:

content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno será añadido al ancho final desplegado.

border-box tiene en cuenta cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluirán cualquier borde o relleno que se añada, y la caja de contenido se encogerá para absorber ese ancho extra. Esta propiedad es especialmente útil para redimensionar cualquier elemento.

se han añadido los prefijos para navegadores necesarios para esta nueva propiedad.

-webkit-box-sizing: border-box;

box-sizing: border-box;

Propiedad resize

Los elementos textarea permiten cambiar el tamaño por el usuario. Podemos anular este comportamiento utilizando la propiedad «resize:none«.

Valor none: Permite cambiar el tamaño del elemento

Valor horizontal: Permite cambiar el tamaño del elemento horizontalmente

Valor vertical: Permite cambiar el tamaño del elemento verticalmente

Valor both: Permite cambiar el tamaño del elemento en horizontal y vertical

El textarea no permite que el usuario cambie su tamaño. Puedes ajustar la propiedad resize según tus necesidades.

Estilos en el input: pseudo-clase :focus

Cuando un usuario interactúa con un input, ya sea para ingresar texto o seleccionar una opción, es importante proporcionar retroalimentación visual para mejorar la experiencia del usuario. Una forma de lograr esto es aplicando estilos específicos cuando el input está en estado :focus. El pseudo-clase :focus se utiliza para aplicar estilos a un elemento cuando recibe el foco de atención.

Eliminar el contorno predeterminado

Para eliminarlo, puedes usar la propiedad outline.

Estilizar el fondo y el borde

Puedes personalizar el fondo y el borde del input cuando está en estado :focus para resaltar su estado activo.

Animaciones y transiciones

Agregar animaciones o transiciones sutiles puede hacer que la interacción con los inputs sea más atractiva.

Estilos para inputs

Los estilos en los inputs pueden mejorar significativamente la estética y la experiencia de usuario de tus formularios.

Estilo básico Bordes redondeados Sombras Hover y focus

Agregar efectos de hover y focus puede mejorar la interactividad y la retroalimentación para el usuario.

Iconos en inputs Animaciones en inputs

Estilos para inputs requeridos, asterisco en label

Esto se hace mediante la adición de un indicativo, por ejemplo un asterisco, al final de las etiquetas correspondientes a los campos obligatorios. Estos estilos ayudan a resaltar visualmente los campos que deben ser completados por el usuario.