Właściwość CSSInterakcja i inne
resize
Pozwala użytkownikowi zmieniać rozmiar elementu, przeciągając jego róg.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy z overflow innym niż visible, pola textarea
- JavaScript
element.style.resize = "vertical"
Przykład
#CSS
textarea {
resize: vertical;
min-height: 80px;
max-height: 240px;
}HTML przykładu
<textarea placeholder="Twoja odpowiedź…" style="width: 100%; resize: vertical; min-height: 80px; max-height: 240px; padding: 8px; border-radius: 8px;"></textarea>Podgląd
Definicja i zastosowanie
#Właściwość resize dodaje w prawym dolnym rogu elementu uchwyt, którym użytkownik może zmieniać jego rozmiar. Pola <textarea> mają go domyślnie, bo przeglądarki ustawiają im resize: both.
Możesz pozwolić na zmianę w obu kierunkach (both), tylko w poziomie (horizontal), tylko w pionie (vertical) albo całkowicie ją wyłączyć (none).
Działa tylko na elementach z overflow innym niż visible. Ograniczenia rozmiaru, jak max-width czy min-height, są nadal respektowane.
Składnia
#Składnia
resize: none | both | horizontal | vertical;Wartości
#- Brak uchwytu, rozmiar stały.
- Zmiana szerokości i wysokości.
- Tylko wysokość, szerokość zostaje stała.
- Tylko szerokość.
Wartości w praktyce
#none
Brak uchwytu, rozmiar stały.
.demo { resize: none; }both
Zmiana szerokości i wysokości.
.demo { resize: both; }vertical
Tylko wysokość, szerokość zostaje stała.
.demo { resize: vertical; }horizontal
Tylko szerokość.
.demo { resize: horizontal; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W formularzach ustaw pola tekstowe na
resize: vertical. Rozciąganie w poziomie zwykle psuje układ. - Nie wyłączaj zmiany rozmiaru pól bez powodu. Użytkownicy piszący dłuższe teksty chętnie z niej korzystają.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.