CSS/Tutorials/Benutzeroberfläche/resize
Mit der Eigenschaft resize können Sie bestimmen, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann. Was für textarea-Elemente in vielen Browsern seit einiger Zeit üblich ist, lässt sich für alle Elemente nachbilden.
Folgende Angaben sind möglich:
-
none
, keine Größenveränderung -
both
, Höhe und Breite sind veränderbar -
horizontal
, Breite ist veränderbar -
vertical
, Höhe ist veränderbar -
initial
, setzt es auf den Ausgangswert zurück. -
inherit
, Einstellung des Elternelements wird übernommen
Der Default-Wert ist none
. In aktuellen Browsern kann für manche Elemente eine andere Voreinstellung festgelegt sein.
div {
background: royalblue;
border: thin solid darkblue;
color: white;
float: left;
margin: 0 1em 1em;
padding: 1em;
overflow: auto; /* muss gesetzt werden! */
resize: both;
width: 10em;
}
div code {
display: block;
}
<div>
<code>resize: both;</code>
<code>overflow: auto;</code>
<p>Die resize-Eigenschaft legt fest, ob ein Element
durch den Nutzer in seiner Größe verändert werden
kann.
</p>
</div>
>
Das div kann in seiner Größe verändert werden. Der umfließende Text nimmt den weiteren, verfügbaren Raum ein und wandert bei einer Vergößerung nach unten.
visible
ist.Sie können durch die Verwendung von resize: none;
die Größenänderung von textarea-Elementen verhindern.