De resize
Controalele de proprietate în cazul în care și modul în care un element poate fi redimensionate de către utilizator făcând clic și trăgând colțul din dreapta jos al elementului.
.module ( resize: both; )
Foarte important de știut: resize
nu face nimic decât dacă overflow
proprietatea este setată la altceva decât visible
, care este valoarea sa inițială pentru majoritatea elementelor.
De asemenea, merită să știți că Firefox vă va permite să redimensionați un element mai mic decât dimensiunea sa originală. Browserele Webkit nu vă permit să redimensionați un element pentru al face mai mic, ci doar mai mare (în ambele dimensiuni).
Valori
none
: elementul nu este redimensionabil. Aceasta este valoarea inițială pentru majoritatea elementelor.textarea
Elementul este cel mai frecvent excepție în multe browsere implicităresize
valoare nu esteboth
.both
: utilizatorul poate redimensiona înălțimea și / sau lățimea elementului.horizontal
: utilizatorul poate redimensiona elementul pe orizontală (mărind lățimea).vertical
: utilizatorul poate redimensiona elementul pe verticală (crescând înălțimea).inherit
: elementul moștenește valoarea de redimensionare a părintelui său.
Când un element este redimensionabil, acesta are un mic mâner UI într-un colț inferior. Mânerul apare în dreapta pe elementele paginii atunci când pagina direction
este setată la ltr
(de la stânga la dreapta) și la stânga pe rtl
paginile (de la dreapta la stânga).
Demo
Elementul redimensionabil din această demonstrație este un paragraf. Faceți clic pe butoane pentru a încerca diferitele resize
valori.
Vedeți Demo-ul de redimensionare stilou de CSS-Tricks (@ css-tricks) pe CodePen.
Legate de
overflow
direction
Mai multe informatii
- Spec
- Documente Mozilla
- Articolul lui David Walsh
- Trucuri Textarea
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
Crom | Firefox | IE | Margine | Safari |
---|---|---|---|---|
4 | 4 * | Nu | 79 | 4 |
Mobil / Tabletă
Android Chrome | Android Firefox | Android | Safari iOS |
---|---|---|---|
88 | 85 | 81 | Nu |