
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).
Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat.
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).
Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat jen vodorovně.
↔
Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat jen svisle.
↕
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 */
}Související články
Možnosti stylování <iframe>
Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.