hãy xem xét kết quả đầu ra cuối cùng được đưa ra cho người dùng về những gì chúng ta muốn đạt được: một vùng văn bản có đệm với cả đường viền và phần đệm, đặc điểm là khi được nhấp, chúng sẽ chuyển trọng tâm đến vùng văn bản của chúng ta và lợi thế của chiều rộng 100% tự động điển hình của các yếu tố khối.
Theo tôi, cách tiếp cận tốt nhất là sử dụng các giải pháp cấp thấp nhất có thể, để đạt được sự hỗ trợ tối đa của trình duyệt. Trong trường hợp này, HTML duy nhất có thể hoạt động tốt, tránh sử dụng Javascript (dù sao đi nữa chúng ta đều yêu thích).
Thẻ LABEL có trong trợ giúp của chúng tôi vì có hành vi như vậy và được phép chứa các yếu tố đầu vào mà nó phải xử lý. Kiểu mặc định của nó là một trong các thành phần nội tuyến, do đó, tạo cho nhãn một kiểu hiển thị khối, chúng ta có thể tự sử dụng chiều rộng 100% tự động bao gồm phần đệm và viền, trong khi văn bản bên trong không có viền, không có phần đệm và chiều rộng 100% .
Nhìn vào các đặc điểm cụ thể của W3C, chúng tôi có thể nhận thấy là:
- không cần thuộc tính "for": khi thẻ LABEL chứa đầu vào đích, nó sẽ tự động tập trung vào đầu vào con khi được nhấp;
- nếu một nhãn bên ngoài cho vùng văn bản đã được thiết kế, sẽ không có xung đột xảy ra, vì một đầu vào nhất định có thể có một hoặc nhiều nhãn.
Xem chi tiết cụ thể của W3C để biết thêm thông tin chi tiết.
Ví dụ đơn giản:
.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>
Phần đệm và đường viền của các phần tử .textareaContainer là phần tử chúng tôi muốn cung cấp cho textarea. Hãy thử chỉnh sửa chúng để tạo kiểu theo ý muốn. Tôi đã đưa phần đệm lớn và có thể nhìn thấy và viền cho phần tử .textareaContainer để cho bạn thấy hành vi của chúng khi nhấp vào.