CSS/Eigenschaften/Benutzeroberfläche/resize
Aus SELFHTML-Wiki
< CSS | Eigenschaften | Benutzeroberfläche
Der Titel dieses Artikels ist mehrdeutig. Für das gleichnamige Event siehe JavaScript/DOM/Event/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.
Details: caniuse.com
Beispiel
ansehen …
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>resize</title>
<style>
div {
background: royalblue;
border: 1px solid darkblue;
color: white;
overflow: auto;
padding: 1em;
resize: both;
width: 10em;
}
code {
display: block;
}
</style>
</head>
<body>
<h1>Resize - Verändern Sie die Größe</h1>
<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>
</body>
</html>
Mit resize erlauben oder verbieten sie dem Nutzer die Änderung der Abmessungen von Elementen.
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.
Beachten Sie: Ein Veränderung der Größe ist nur möglich und sinnvoll, wenn die
overflow-Eigenschaft des Elements einen Wert hat, der verschieden von visible ist.Beachten Sie: Chrome und Safari lassen keine Verkleinerung des Elementes zu.
Sie können durch die Verwendung von resize: none; die Größenänderung von textarea-Elementen verhindern.
