CSS-Eigenschaft: resize, Kategorien: Bildschirmdarstellung (allgemein), Basic User Interface (CSS 3)
Veränderbarkeit der Größe (u.a. textarea)
Steuert, ob und in welcher Richtung die Größe eines HTML-Elements verändert werden kann.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Veränderbarkeit der Größe (u.a. textarea) |
| none <textarea>: both |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), Basic User Interface (CSS 3):
- align-content
- align-items
- align-self
- box-decoration-break
- box-shadow
- box-sizing
- clip
- column-count
- column-fill
- column-width
- columns
- content
- cursor
- direction
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- icon
- justify-content
- nav-down
- nav-index
- nav-left
- nav-right
- nav-up
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- Aktuelle Seite: resize
- rotation
- rotation-point
- text-overflow
- unicode-bidi
- visibility
- zoom
Folgendes ist beim Einsatz von resize zu beachten:
- resize steuert, ob die Größe eines HTML-Elements mit der Maus bzw. dem Mauszeiger verändert werden kann:
- none deaktiviert die Größenveränderbarkeit.
- horizontal lässt die Veränderung nur in der Breite zu.
- vertical lässt die Veränderung nur in der Höhe zu.
- both lässt die Veränderung sowohl in der Breite als auch in der Höhe zu.
- resize wird in der Regel mit Textfeldern (<textarea>) in Verbindung gebracht,
ist aber nicht darauf beschränkt. Die Steuerung über das CSS unterscheidet
sich allerdings zwischen <textarea> und anderen Elementen:
- <textarea>: Standardwert ist both, ohne explizite Angabe hat das Textfeld den Greifer zum Verändern der Größe.
- andere HTML-Elemente: Standardwert ist none. Damit resize greifen kann, benötigt das Element zusätzlich eine Angabe von overflow, entweder auto, hidden oder scroll. Ein visible aktiviert die Größenveränderbarkeit nicht!
- Wird vom Firefox ab Version 4.0, Safari ab Version 3 und von Chrome unterstützt. Internet Explorer bis zur Version 9 und Opera bis zur Version 11.5 unterstützen resize nicht. Streng genommen ist es aber nicht die CSS-Eigenschaft, die nicht unterstützt wird, sondern es fehlt das Feature des HTML-Elements, auf das die Eigenschaft nicht wirken kann.
- Im Firefox kann die Größe eines Elements nicht nur vergrößert, sondern auch verkleinert werden. Safari und Chrome lassen nur eine Vergrößerung zu.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS3 |
|
|
|
|
|
Hinweis
Mit der Möglichkeit, die Größe einer <textarea> verändern zu können, haben die Browserhersteller ein wertvolles Feature entwickelt. Die Eingabe wird wesentlich einfacher, wenn der Nutzer "mehrzeilige Eingabefelder" auf eine für ihn brauchbare Größe ziehen kann.
Die Bedienbarkeit eines Formulars wird dadurch wesentlich verbessert. Von daher sollte genau abgewägt werden, ob dieses Feature deaktiviert und damit die Bedienbarkeit einer Seite einschränkt werden soll.
Weiterführende Informationen zu resize:
- W3C Spezifikation:
http://www.w3.org/TR/css3-ui/#resize0
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
range - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
resolution
Beispiele
HTML:
<div class="form">
<textarea cols="30" rows="8"></textarea>
</div>
CSS:
/* Generelles Style für Beispiele mit
Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="form">
<textarea id="example-1" cols="30" rows="8"></textarea>
</div>
CSS:
#example-1 {
resize: both;
}
/* Auch ein both ändert nichts an der mangelnden Unterstützung von Opera und IE. */
Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="form">
<textarea id="example-2" cols="30" rows="8"></textarea>
</div>
CSS:
#example-2 {
resize: none;
}
/* Über none wird die Möglichkeit, die Größe des Textfeldes zu verändern, deaktiviert. */
Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="form">
<textarea id="example-3" cols="30" rows="8"></textarea>
</div>
CSS:
#example-3 {
resize: horizontal;
}
/* Über horizontal kann das Feld nur noch in der Breite verändert werden. */
Beispiel Nr. 4 So sieht's aus:
HTML:
<div class="form">
<textarea id="example-4" cols="30" rows="8"></textarea>
</div>
CSS:
#example-4 {
resize: vertical;
}
/* Über vertical ist das Feld nur in der Höhe veränderbar. */
Beispiel Nr. 5 So sieht's aus:
HTML:
<div id="example-5">DIV no-resize</div>
CSS:
#example-5 {
background-color: orange;
width: 150px;
height: 130px;
padding: 20px;
resize: both;
}
/* Ein resize alleine (außer bei
Beispiel Nr. 6 So sieht's aus:
HTML:
<div id="example-6">DIV resize</div>
CSS:
#example-6 {
background-color: orange;
width: 150px;
height: 130px;
padding: 20px;
overflow: auto;
resize: both;
}
/* Damit resize greifen kann, muss ein overflow (außer dem Wert visible) gesetzt sein. */
Beispiel Nr. 7 So sieht's aus:
HTML:
<h1 id="example-7">H1 resize</h1>
CSS:
#example-7 {
background-color: coral;
padding: 10px;
overflow: hidden;
resize: vertical;
}
/* Dabei ist egal, ob overflow mit hidden, scroll oder auto gesetzt ist. */
Beispiel Nr. 8 So sieht's aus:
H1 resize
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!