Ubah ukuran - Trik CSS | CSS Almanak 2024

The resizekontrol properti apakah dan bagaimana elemen dapat diubah ukurannya oleh pengguna dengan mengklik dan menyeret sudut kanan bawah dari elemen.

.module ( resize: both; )

Sangat penting untuk diketahui: resize tidak melakukan apa pun kecuali overflowproperti disetel ke sesuatu selain visible, yang merupakan nilai awalnya untuk sebagian besar elemen.

Perlu juga diketahui bahwa Firefox akan membiarkan Anda mengubah ukuran elemen lebih kecil dari ukuran aslinya. Browser Webkit tidak akan membiarkan Anda mengubah ukuran elemen menjadi lebih kecil, hanya lebih besar (di kedua dimensi).

Nilai

none: elemen tidak dapat diubah ukurannya. Ini adalah nilai awal untuk sebagian besar elemen. The textareaelemen yang paling umum pengecualian-in banyak browser default resizenilai adalah both.
both: pengguna dapat mengubah ukuran tinggi dan / atau lebar elemen.
horizontal: pengguna dapat mengubah ukuran elemen secara horizontal (menambah lebar).
vertical: pengguna dapat mengubah ukuran elemen secara vertikal (menambah tinggi).
inherit: elemen mewarisi nilai pengubahan ukuran dari induknya.

Saat sebuah elemen dapat diubah ukurannya, elemen tersebut memiliki pegangan UI kecil di pojok bawah. Pegangan muncul di kanan pada elemen halaman saat halaman directiondisetel ke ltr(kiri-ke-kanan), dan di kiri pada halaman rtl(kanan-ke-kiri).

Elemen tanpa pegangan (depan) dan dengan pegangan (belakang)

Demo

Elemen yang dapat diubah ukurannya dalam demo ini adalah sebuah paragraf. Klik tombol untuk mencoba nilai yang berbeda resize.

Lihat Demo Pen Resize oleh CSS-Tricks (@ css-trick) di CodePen.

Terkait

overflow
direction

Informasi Lebih Lanjut

Spesifikasi
Mozilla Docs
Artikel David Walsh
Trik Textarea

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.