¿Cómo desactivar el redimensionamiento de un área de texto?

Mateo G. -

Problema: Redimensionamiento no deseado del área de texto

Las áreas de texto en los formularios HTML suelen tener una función de redimensionamiento por defecto. Esto puede afectar el diseño y la apariencia de una página web, especialmente cuando necesitas controlar el aspecto del formulario.

Desactivar el Redimensionamiento de Textarea con CSS

Uso de la Propiedad Resize

La propiedad CSS resize controla si el usuario puede redimensionar un elemento. Para los textareas, puedes usar esta propiedad para desactivar el comportamiento de redimensionamiento predeterminado.

Para desactivar el redimensionamiento, usa este CSS:

textarea {
  resize: none;
}

Esta regla CSS establece la propiedad resize en none, lo que impide cualquier redimensionamiento del textarea.

Ejemplo: Mantener un Diseño Consistente

Desactivar el redimensionamiento del textarea ayuda a mantener un diseño consistente en tu página web, evitando que los usuarios alteren accidentalmente el diseño.

Aplicar la Propiedad Resize a Todos los Textareas

Para desactivar el redimensionamiento de todos los textareas en una página web, aplica la regla CSS de forma global:

textarea {
  resize: none;
}

Esta regla se dirige a todos los elementos <textarea> y desactiva su redimensionamiento.

Dirigirse a Textareas Específicos

Para un mayor control, puedes desactivar el redimensionamiento de textareas específicos:

  • Usando una clase:

    .no-resize {
resize: none;
}

    Aplícalo a un textarea con: <textarea class="no-resize"></textarea>

  • Usando un ID:

    #comment-box {
resize: none;
}

    Aplícalo a un textarea con: <textarea id="comment-box"></textarea>

  • Usando un atributo name:

    textarea[name="message"] {
resize: none;
}

    Aplícalo a un textarea con: <textarea name="message"></textarea>

Opciones alternativas de redimensionamiento

Redimensionamiento solo vertical

Puedes permitir que los usuarios redimensionen un área de texto verticalmente manteniendo su ancho fijo. Esto es útil cuando quieres dar a los usuarios cierto control sobre el tamaño del área de texto sin cambiar el diseño de tu página. Para habilitar el redimensionamiento solo vertical, usa este CSS:

textarea {
  resize: vertical;
}

Esta regla permite que el área de texto se redimensione verticalmente, manteniendo su ancho igual.

Ejemplo: Evitar el redimensionamiento excesivo

Para limitar el rango de redimensionamiento vertical, puedes usar las propiedades min-height y max-height:

textarea {
  resize: vertical;
  min-height: 100px;
  max-height: 300px;
}

Esto asegura que el área de texto no se vuelva demasiado pequeña o demasiado grande.

Redimensionamiento solo horizontal

A veces, es posible que quieras permitir el redimensionamiento horizontal manteniendo la altura fija. Esto puede ayudar con entradas que puedan tener líneas de texto largas. Para habilitar el redimensionamiento solo horizontal, usa este CSS:

textarea {
  resize: horizontal;
}

Esta regla permite que el área de texto se redimensione horizontalmente, manteniendo su altura igual.

Para que estas opciones de redimensionamiento funcionen, necesitas establecer la propiedad overflow en algo diferente a visible. Por ejemplo:

textarea {
  resize: vertical;
  overflow: auto;
}

Esta combinación permite el redimensionamiento vertical y agrega barras de desplazamiento cuando el contenido es más grande que el tamaño del área de texto.