Wie kann ich die Größenänderung von Textbereichen in CSS deaktivieren oder steuern?

Deaktivieren der Größenänderung von Textbereichen

Im Bereich der Webentwicklung ist es oft wünschenswert, das Größenänderungsverhalten von Textbereichen zu steuern. Standardmäßig kann die Größe von Textbereichen durch Ziehen der unteren rechten Ecke geändert werden, sodass Benutzer die Abmessungen anpassen können. Es gibt jedoch Situationen, in denen diese Funktion möglicherweise nicht notwendig oder erwünscht ist.

Um die Größenänderungseigenschaft eines Textbereichs zu deaktivieren, kann man die Leistungsfähigkeit von CSS nutzen. Die folgende Regel verhindert effektiv, dass die Größe des Textbereichs geändert wird:

textarea {
  resize: none;
}

Diese Regel gilt für alle Textbereiche im Dokument. Wenn Sie die Größenänderung jedoch nur für bestimmte Textbereiche deaktivieren möchten, können Sie Klassen- oder Attributselektoren verwenden.

So deaktivieren Sie beispielsweise die Größenänderung für Textbereiche mit der Klasse „textarea1“:

.textarea1 {
  resize: none;
}

Alternativ können Sie die Größenänderung für einen bestimmten Textbereich mit dem Namen „foo“ deaktivieren:

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

Oder Wenn Sie lieber das ID-Attribut verwenden möchten:

#foo {
  resize: none;
}

Die W3C-Spezifikation bietet zusätzliche Optionen zum Einschränken des Größenänderungsverhaltens, einschließlich „beide“, „horizontal“ und „vertikal“. Dadurch können Sie festlegen, welche Maße (Breite oder Höhe) angepasst werden können.

textarea {
  resize: vertical; /* Resize vertically, fixed width */
}

Es ist wichtig zu beachten, dass die Eigenschaft „resize“ nur dann wirksam wird, wenn die Eigenschaft „overflow“ auf einen Wert gesetzt ist anders als „sichtbar“. Um die Größenänderung zu ermöglichen, stellen Sie daher sicher, dass Ihr Textbereich über eine „Überlauf“-Eigenschaft verfügt, die auf „Bildlauf“ oder einen anderen geeigneten Wert eingestellt ist.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größenänderung von Textbereichen in CSS deaktivieren oder steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!