Comment puis-je désactiver ou contrôler le redimensionnement des zones de texte en CSS ?

Désactiver le redimensionnement d'une zone de texte

Lorsque vous travaillez avec des zones de texte, vous pouvez rencontrer le besoin de restreindre la capacité des utilisateurs à la redimensionner. Le comportement par défaut permet aux utilisateurs d'ajuster la hauteur et la largeur de la zone de texte en cliquant et en faisant glisser le coin inférieur droit.

Pour désactiver cette capacité de redimensionnement, implémentez la règle CSS suivante :

textarea {
  resize: none;
}

Cette règle empêchera les utilisateurs de redimensionner tout élément de zone de texte sur la page. Cependant, si vous devez désactiver le redimensionnement uniquement pour des zones de texte spécifiques, vous pouvez utiliser des méthodes alternatives :

• Attribut de classe : Utilisez un attribut de classe dans la balise HTML pour désactiver le redimensionnement pour un ensemble spécifique de zones de texte.

.textarea1 {
  resize: none;
}

• Attribut de nom : Désactiver redimensionnement d'une zone de texte avec un attribut de nom spécifique.

textarea[name=foo] {
  resize: none;
}

• Attribut ID : Désactivez le redimensionnement d'une zone de texte avec un attribut d'ID spécifique.

#foo {
  resize: none;
}

De plus, vous pouvez spécifier le type de restrictions de redimensionnement que vous souhaitez appliquer en utilisant ce qui suit valeurs :

• aucun (par défaut) : Désactive tous les redimensionnements.
• les deux : Permet le redimensionnement horizontal et vertical.
• horizontal : Autorise uniquement l'horizontal redimensionnement.
• vertical : Autorise uniquement le redimensionnement vertical.
• inherit : Hérite de la propriété de redimensionnement de l'élément parent.

N'oubliez pas que la propriété resize n'affecte le comportement des zones de texte que lorsque la propriété overflow n'est pas définie sur visible (ce qui est la valeur par défaut). Pour utiliser la propriété resize, vous devez généralement définir le débordement pour qu'il défile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!