Właściwość CSS – resize

Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea).

Właściwość resize jest ściśle powiązana z overflow. Cecha nie będzie działać jeśli overflow=”visible”. Dopuszczalne wartości to „scroll”, „auto”, albo „hidden”.

Ustawienia resize

resize przyjmuje kilka wartości

• none – brak
• both – można dowolnie rozszerzać, zmieniać wymiary (bok, dół)
• horizontal – można rozszerzać w bok
• vertical – można rozszerzać w dół
• initial – ustawienia domyślne
• inherit – dziedziczy ustawienia rodzica

Przykłady:

Poniższe przykładowe prostokąty będą posiadać takie same ustawienia podstawowe CSS:

.demo{
    width: 250px;
    height: 100px;
    border: 1px solid #333;
    background-color: #027abb;
}

resize: none;

Kod HTML

<div class="demo"></div>

---

resize: both;

Rozciąganie w kierunkach – dół, bok

Kod HTML

<div class="demo both"></div>

Kod CSS

.both{
    resize: both;
    overflow:auto; 
}

---

resize: horizontal

Rozciąganie kontenera tylko horyzontalnie (w bok)

Kod HTML

<div class="demo horizontal"></div>

Kod CSS

.horizontal{
    resize: horizontal;
    overflow:auto; 
}

---

resize: vertical

Rozciąganie kontenera z dół.

Kod HTML

<div class="demo vertical"></div>

Kod CSS

.vertical{
    resize: vertical;
    overflow:auto; 
}

---

resize: initial

Kod HTML

<div class="demo initial"></div>

Kod CSS

.initial{
    resize: initial;
    overflow:auto; 
}

---

resize: inherit

Kod HTML

<div class="demo inherit"></div>

Kod CSS

.inherit{
    resize: inherit;
    overflow:auto; 
}

Interpretacja przez przeglądarki

Właściwość	Chrome	IE / Edge	Firefo	Safari	Opera
resize	4.0	nie działa	5.0 4.0 -moz-	4.0	15.0

źródło:
https://www.w3schools.com/cssref/css3_pr_resize.asp

przeciąganie, zmienianie rozmiarów pola tekstowego z pomocą CSS