Zmień rozmiar - CSS-Tricks | Almanach CSS 2025

Te resizekontrole własności, czy i jak dany element może być zmieniany przez użytkownika, klikając i przeciągając prawy dolny róg elementu.

.module ( resize: both; )

Bardzo ważne, aby wiedzieć: resize nic nie robi, chyba że overflowwłaściwość jest ustawiona na coś innego niż visible, co jest jej wartością początkową dla większości elementów.

Warto też wiedzieć, że Firefox umożliwia zmianę rozmiaru elementu mniejszego niż jego pierwotny rozmiar. Przeglądarki Webkit nie pozwalają na zmianę rozmiaru elementu, aby był mniejszy, a jedynie większy (w obu wymiarach).

Wartości

none: elementu nie można zmienić. To jest wartość początkowa dla większości elementów. textareaElementem jest najczęstszą wyjątek w wielu przeglądarkach jego domyślną resizewartość both.
both: użytkownik może zmienić wysokość i / lub szerokość elementu.
horizontal: użytkownik może zmienić rozmiar elementu w poziomie (zwiększając szerokość).
vertical: użytkownik może zmienić rozmiar elementu w pionie (zwiększając wysokość).
inherit: element dziedziczy wartość zmiany rozmiaru swojego rodzica.

Kiedy element można zmienić, ma mały uchwyt interfejsu użytkownika w dolnym rogu. Uchwyt pojawia się po prawej stronie elementów strony, gdy strona directionjest ustawiona na ltr(od lewej do prawej), a po lewej stronie rtl(od prawej do lewej).

Element bez uchwytu (przód) iz uchwytem (tył)

Próbny

Elementem o zmiennym rozmiarze w tej wersji demonstracyjnej jest akapit. Kliknij przyciski, aby wypróbować różne resizewartości.

Zobacz demo zmiany rozmiaru pióra przez CSS-Tricks (@ css-tricks) na CodePen.

Związane z

overflow
direction

Więcej informacji

Spec
Dokumenty Mozilli
Artykuł Davida Walsha
Textarea Tricks

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.