Comment désactiver le redimensionnement des zones de texte ?

Lucas D. -

Problème : Redimensionnement indésirable des zones de texte

Les zones de texte dans les formulaires HTML ont souvent une fonction de redimensionnement par défaut. Cela peut affecter la mise en page et le design d'une page web, surtout lorsque vous devez contrôler l'apparence du formulaire.

Désactivation du redimensionnement des zones de texte avec CSS

Utilisation de la propriété Resize

La propriété CSS resize contrôle si un élément peut être redimensionné par l'utilisateur. Pour les zones de texte, vous pouvez utiliser cette propriété pour désactiver le comportement de redimensionnement par défaut.

Pour désactiver le redimensionnement, utilisez ce CSS :

textarea {
  resize: none;
}

Cette règle CSS définit la propriété resize sur none, ce qui empêche tout redimensionnement de la zone de texte.

Exemple: Maintenir une mise en page cohérente

La désactivation du redimensionnement des zones de texte aide à maintenir une mise en page cohérente sur votre page web, empêchant les utilisateurs de modifier accidentellement le design.

Application de la propriété Resize à toutes les zones de texte

Pour désactiver le redimensionnement de toutes les zones de texte sur une page web, appliquez la règle CSS globalement :

textarea {
  resize: none;
}

Cette règle cible tous les éléments <textarea> et désactive leur redimensionnement.

Ciblage de zones de texte spécifiques

Pour plus de contrôle, vous pouvez désactiver le redimensionnement pour des zones de texte spécifiques :

  • En utilisant une classe :

    .no-resize {
resize: none;
}

    Appliquez ceci à une zone de texte avec : <textarea class="no-resize"></textarea>

  • En utilisant un ID :

    #comment-box {
resize: none;
}

    Appliquez ceci à une zone de texte avec : <textarea id="comment-box"></textarea>

  • En utilisant un attribut name :

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

    Appliquez ceci à une zone de texte avec : <textarea name="message"></textarea>

Options de redimensionnement alternatives

Redimensionnement vertical uniquement

Vous pouvez permettre aux utilisateurs de redimensionner une zone de texte verticalement tout en gardant sa largeur fixe. C'est utile lorsque vous souhaitez donner aux utilisateurs un certain contrôle sur la taille de la zone de texte sans modifier la mise en page de votre page. Pour activer le redimensionnement vertical uniquement, utilisez ce CSS :

textarea {
  resize: vertical;
}

Cette règle permet à la zone de texte d'être redimensionnée verticalement, en gardant sa largeur inchangée.

Exemple: Éviter un redimensionnement excessif

Pour limiter la plage de redimensionnement vertical, vous pouvez utiliser les propriétés min-height et max-height :

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

Cela garantit que la zone de texte ne devient pas trop petite ou trop grande.

Redimensionnement horizontal uniquement

Parfois, vous pourriez vouloir permettre le redimensionnement horizontal tout en gardant la hauteur fixe. Cela peut être utile pour les entrées qui pourraient avoir de longues lignes de texte. Pour activer le redimensionnement horizontal uniquement, utilisez ce CSS :

textarea {
  resize: horizontal;
}

Cette règle permet à la zone de texte d'être redimensionnée horizontalement, en gardant sa hauteur inchangée.

Pour que ces options de redimensionnement fonctionnent, vous devez définir la propriété overflow à une valeur autre que visible. Par exemple :

textarea {
  resize: vertical;
  overflow: auto;
}

Cette combinaison permet le redimensionnement vertical et ajoute des barres de défilement lorsque le contenu est plus grand que la taille de la zone de texte.