PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: resize, Kategorien: Bildschirm­darstellung (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.

CSS-Eigenschaft: resize
KurzbeschreibungWerteStandardwertKategorieHinweis
Veränderbarkeit der Größe (u.a. textarea)
  • none
  • both
  • horizontal
  • vertical
  • inherit
none
<textarea>: both
Allgemein:
Bildschirm­darstellung
CSS 3:
Basic User Interface
Neu in CSS 3
 

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.
Browserunterstützung von resize
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10
n
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
nt

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:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    range


Beispiele

HTML:

<div class="form">
    <textarea cols="30" rows="8"></textarea>
 </div>

CSS:

/* Generelles Style für Beispiele mit 
 
 

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 nur für: FirefoxSafariGoogle ChromeOpera
W3C: 12.1

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 nur für: FirefoxSafariGoogle ChromeOpera
W3C: 12.1

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 nur für: FirefoxSafariGoogle ChromeOpera
W3C: 12.1

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 nur für: FirefoxSafariGoogle ChromeOpera
W3C: 12.1

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