Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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 <textarea>. */
div.form {
   padding: 20px;
   background-color: darkblue;
}
 
/* Firefox, Safari und Chrome haben rechts unten die "Ecke", um die Größe des Textfeldes zu verändern. 
Opera bis 11.5 und Internet Explorer bis 9 unterstützen das Feature noch nicht. */
Beispiel nur für: FirefoxSafariGoogle ChromeOpera
W3C: 12.1

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 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 <textarea>) aktiviert noch nicht die Größenveränderung. */
Beispiel nur für: FirefoxSafariGoogle Chrome

Beispiel Nr. 6 So sieht's aus:

DIV no-resize
 

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 nur für: FirefoxSafariGoogle Chrome

Beispiel Nr. 7 So sieht's aus:

DIV resize
 

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 nur für: FirefoxSafariGoogle Chrome

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 5.999 sec.

Browser-Marktanteile