Właściwość CSS – resize

Czas czytania: < 1 minut

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:

Podstawowe wymiary przykładowych prostokątów – CSS

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

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śćChromeIE / EdgeFirefoSafariOpera
resize4.0nie działa5.0
4.0 -moz-
4.015.0

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

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