CSS resize

V Opeře 12 funguje resize nejspíš jen u značek <textarea> a <input>; v Opeře 17 založené na Webkitu už resize funguje všude. Ve Firefoxu a Chrome také není problém. IE (včetně IE 11) se zatím vůbec nechytá.

Co umí? Umožňuje bez JavaScriptu uživateli měnit rozměry libovolného elementu (třeba <div>u).

CSS změna rozměrů bude fungovat jen při nastaveném overflow na libovolnou hodnotu (auto, scroll), pochopitelně kromě výchozího overflow: visible.

Stanovit maximální a minimální rozměry roztahování jde vlastnostmi min-width a max-width / min-height a max-height. Samotné height nebo width platí zároveň jako minimální možný rozměr.

Zápis

Zápis vlastnosti resize je dost jednoduchý.

element {
  resize: both;
}

Může nabývat čtyřech hodnot:

• both — roztahování do obou stran,
• horizontal — roztahování do strany,
• vertical — roztahování do výšky,
• none — zruší možnost změn rozměrů (má smysl třeba pro <textarea>, kde bývá výchozí resize: both).

Roztahování formulářových prvků

Doplnění od Kolesovy plavkyně:

Textový <input> jde v Opeře roztahovat jen vodorovně i při nastavení resize: both, v Chrome nejde roztáhnout vůbec, přestože se symbol pro roztažení ukazuje.

Resize kursor (cursor)

Kursor do resizovací podoby je možné změnit následovně:

element {
  cursor: se-resize; /* both */
  cursor: e-resize; /* vodorovně */
  cursor: n-resize; /* svisle */
}