Menyembunyikan tuas pengubah ukuran textarea di Safari

97

Saya menggunakan komponen textarea dalam aplikasi saya, dan saya mengontrol tingginya secara dinamis. Saat pengguna mengetik, tinggi akan bertambah setiap kali ada cukup teks. Ini berfungsi dengan baik di IE, Firefox, dan Safari.

Namun, di Safari, ada alat "pegangan" di kanan bawah yang memungkinkan pengguna untuk mengubah ukuran area teks dengan mengklik dan menyeret. Saya juga memperhatikan masalah ini dengan textarea di stackoverflow Ajukan pertanyaan halaman. Alat ini membingungkan dan pada dasarnya menghalangi.

Jadi, apakah ada cara untuk menyembunyikan tuas pengubah ukuran ini?

(Saya tidak yakin apakah "pegangan" adalah kata yang tepat, tetapi saya tidak dapat memikirkan istilah yang lebih baik.)

safari webkit css david.mchonechase
sumber

Jawaban:

177

Anda dapat mengganti perilaku pengubahan ukuran dengan CSS:

textarea
{
   resize: none;
}

atau sederhananya

<textarea style="resize: none;">TEXT TEXT TEXT</textarea>

Properti yang valid adalah: keduanya, horizontal, vertikal, tidak ada

Tamas Czinege
sumber
22
Tidak sepenuhnya relevan di sini, tetapi Safari juga menghormati properti CSS min-height, max-height, min-width, dan max-width untuk membiarkan pengubahan ukuran diaktifkan tetapi membatasi seberapa jauh ia dapat mengubah ukurannya.
stevemegson
1
Terima kasih! Akan mengajukan pertanyaan yang sama ini :)
alex
Bagaimana jika saya ingin menampilkannya di hover setelah saya menyetel resize: none?
Michael Forrest
@Michael Forrest: sudahkah Anda mencoba textarea: hover {resize: inherit! Important; }? Saya belum pernah mencobanya, hanya tebakan.
Tamas Czinege
7
Satu peringatan: Tidak mengizinkan pengguna untuk mengubah ukuran <textarea>sama sekali bisa menjadi masalah kegunaan. Pengaturan resize:vertical;seringkali merupakan pilihan yang lebih baik. Itu seharusnya tidak mengacaukan tata letak Anda, dan itu memberi pengguna rasa kendali yang lebih besar.
Web_Designer
2

Gunakan aturan CSS berikut untuk menonaktifkan perilaku ini untuk semua TextAreaelemen:

textarea {
    resize: none;
}

Jika Anda ingin menonaktifkannya untuk beberapa (tetapi tidak semua) TextAreaelemen, Anda memiliki beberapa opsi (terima kasih untuk halaman ini ).

Untuk menonaktifkan spesifik TextAreadengan nameatribut yang disetel ke foo(yaitu, <TextArea name="foo"></TextArea>):

textarea[name=foo] {
    resize: none;
}

Atau, menggunakan ID (mis. <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

Perhatikan bahwa ini hanya relevan untuk browser berbasis WebKit (yaitu, Safari dan Chrome), yang menambahkan tuas pengubah ukuran ke TextAreakontrol.

Gaurang P.
sumber