mari kita pertimbangkan hasil akhir yang diberikan kepada pengguna tentang apa yang ingin kita capai: sebuah textarea empuk dengan baik perbatasan dan padding, yang karakteristiknya adalah bahwa diklik mereka memberikan fokus ke textarea kita, dan keuntungan dari lebar 100% otomatis tipikal elemen blok.
Pendekatan terbaik menurut saya adalah menggunakan solusi tingkat rendah sejauh mungkin, untuk mencapai dukungan browser maksimum. Dalam hal ini satu-satunya HTML bisa berfungsi dengan baik, menghindari penggunaan Javascript (yang bagaimanapun kita semua suka).
Tag LABEL datang dalam bantuan kami karena memiliki perilaku seperti itu dan diizinkan mengandung elemen input yang harus dialaminya. Gaya standarnya adalah salah satu elemen sebaris, jadi, dengan memberi label gaya tampilan blok, kami dapat memanfaatkan lebar 100% otomatis termasuk padding dan border, sedangkan textarea bagian dalam tidak memiliki batas, tanpa padding, dan lebar 100% .
Melihat pada spesifik W3C keuntungan lain yang mungkin kita perhatikan adalah:
- atribut "for" tidak diperlukan: ketika tag LABEL berisi input target, secara otomatis memfokuskan input anak ketika diklik;
- jika label eksternal untuk textarea telah dirancang, tidak ada konflik terjadi, karena input yang diberikan mungkin memiliki satu atau lebih label.
Lihat spesifikasi W3C untuk informasi lebih rinci.
Contoh sederhana:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
Padding dan border elemen .textareaContainer adalah elemen yang ingin kami berikan kepada textarea. Coba edit mereka untuk mengubahnya sesuai keinginan. Saya memberi padding besar dan terlihat dan berbatasan dengan elemen .textareaContainer untuk membiarkan Anda melihat perilaku mereka ketika diklik.