Propiedad resize de CSS
La propiedad resize
de CSS permite al usuario redimensionar un elemento en pantalla. Para ello aparecerá un selector en la esquina inferior derecha que arrastrándolo modificará su tamaño.
Esta función es algo que se utiliza tradicionalmente en el diseño web para las áreas de texto en los formularios, ya que permite una mayor comodidad a la hora de redactar textos.
Los valores que esta propiedad permite son: horizontal
, vertical
, both
, initial
, inherit
y none
. Dependerá de nosotros aplicar una u otra dependiendo del caso.
Valor resize: horizontal
Habilitará que el elemento se pueda extender horizontalmente.
.elemento {
resize: horizontal;
}
Valor resize: vertical
Permitirá al usuario ajustar el alto del elemento a criterio del usuario.
.elemento {
resize: vertical;
}
Valor resize: both
Se trata de una combinación de las dos anteriores. Permite al usuario redimensionar el elemento tanto en vertical como en horizontal.
.elemento {
resize: both;
}
Valor resize: initial
Restablece la propiedad a su valor inicial. Esto es muy útil cuando anidamos elementos y queremos que la propiedad no se vea afectada por los valores del padre.
.elemento {
resize: initial;
}
Valor resize: inherit
Justo al contrario que el valor anterior, con inherit permitimos que el elemento herede el valor de su padre.
.elemento {
resize: inherit;
}
Valor resize: none
Nos permitirá que el elemento no se pueda ajustar en modo alguno.
.elemento {
resize: none;
}
Deja una respuesta