Chuyển đổi đầu vào theo kiểu tùy chỉnh


Trần Sơn Hà
7 năm trước
Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 3701

Thỉnh thoảng tôi không ngại thử thách tốt, nhưng có một điều tôi thường sẽ từ chối ngay tại chỗ: các trường nhập theo kiểu tùy chỉnh. Không chỉ bởi vì hầu hết các dạng của trường đầu vào nổi tiếng là khó tạo kiểu trình duyệt chéo, mà còn bởi vì hầu hết các giải pháp "giả mạo" làm rối tung khả năng truy cập và không có khả năng trong tương lai. Trong hầu hết các trường hợp, kết quả không đáng để bạn nỗ lực và tốt hơn hết là bạn nên để kiểu dáng của các trường đầu vào cho trình duyệt hoặc HĐH. Có một ngoại lệ đáng chú ý mặc dù.

Kính râm

Vấn đề lớn nhất với các yếu tố hình thức là chúng là một phần của cùng một gói cơ bản. Trường nhập văn bản đơn giản có thể không quá khó để tạo kiểu, nhưng thả xuống (chọn) là (và sẽ tiếp tục cho đến khi hỗ trợ Shadow dom css trở nên phổ biến trên tất cả các trình duyệt phổ biến). Kết hợp một trường nhập văn bản theo kiểu với một danh sách thả xuống không được chỉnh sửa trên cùng một hình thức và kết quả thậm chí còn tàn bạo hơn là chỉ để lại thiết kế cho trình duyệt hoặc HĐH. Vì vậy, trừ khi chúng ta đang nói về các điều kiện cực kỳ kiểm soát, tôi thích tránh xa các yếu tố đầu vào kiểu dáng hoàn toàn.

Một ngoại lệ đáng chú ý là yếu tố "chuyển đổi" (hoặc chuyển đổi). Dù sao nó cũng không phải là một phần của gói tiêu chuẩn của các yếu tố đầu vào và nó có thể được nấu chín theo cách rất thân thiện và dễ tiếp cận. Kết hợp nó với các yếu tố khác không phải là tất cả mà chói tai và nó trông tốt hơn nhiều so với các lựa chọn thay thế có thể.

Chuyển đổi đánh dấu

<div class="toggle"> 
	<div class="label">Toggle label</div> 
	<div class="value"> 
		<div class="control"> 
			<input type="radio" id="id-1" name="name" checked="checked" /> 
			<label for="id-1">on</label> 
		</div> 
		<div class="control"> 
			<input type="radio" id="id-2" name="name"/> 
			<label for="id-2">off</label> 
		</div> 
	</div> 
</div>
Điều thú vị về việc chuyển đổi là nói về mặt cấu trúc / ngữ nghĩa, nó ít hơn một chút so với danh sách các nút radio liên quan. Chuyển đổi cung cấp cho bạn một loạt các tùy chọn (mặc dù thường giới hạn ở 2) trong đó bạn chỉ có thể chọn một tùy chọn. Sự khác biệt lớn nhất về chức năng giữa danh sách nút chuyển đổi và nút radio cổ điển là việc chuyển đổi thường (nếu không luôn luôn) đi kèm với trạng thái được chọn trước, trong đó tất cả các danh sách các nút radio có thể được bỏ chọn khi tải biểu mẫu.

Đoạn mã html ở trên có thể xuất hiện một chút dài dòng đối với một số người (mã của tôi luôn như vậy), nhưng tất cả các yếu tố cấu trúc đều có ý nghĩa và trên hết chúng sẽ chứng minh khá hữu ích khi áp dụng css. Vui lòng sử dụng html leaner nếu tình huống cho phép mặc dù.

CSS và khả năng truy cập


.toggle .control {float:left;} 
.toggle .control input {.hidden; [hide from view]} 
Bây giờ, điều thú vị về các nút radio (và các hộp kiểm cho vấn đề đó) là chúng có thể được kiểm soát độc quyền với các nhãn liên quan của chúng. Nhấp vào nhãn sẽ chọn hoặc bỏ chọn đầu vào được liên kết, đó là tất cả các tương tác chúng ta thực sự cần. Vì vậy, ẩn trường đầu vào thực tế và sử dụng nhãn làm điều khiển đầu vào là hoàn toàn an toàn trong trường hợp này; không có thủ thuật javascript ưa thích.
.toggle .control input:checked + label {[active state]} 
.toggle .control input:focus + label {[focus state]} 

Sẽ có thêm trợ giúp với tùy chọn định kiểu các thành phần dựa trên trạng thái đã chọn của đầu vào radio. Vì phần tử đầu vào thực tế của chúng tôi nằm trước nhãn được liên kết của nó, chúng tôi có thể sử dụng trạng thái đã chọn của đầu vào radio để thay đổi kiểu của nhãn (sang trạng thái hoạt động trực quan). Thủ thuật tương tự giúp chúng ta định kiểu trạng thái tập trung của đầu vào (nhắm vào người dùng bàn phím có thể kích hoạt các nút radio bằng cách nhấn phím 'enter').

kiểm tra trang thử nghiệm để biết các toggles theo kiểu tùy chỉnh

An toàn, nhưng không dành cho tất cả mọi người

Khi tôi nói "an toàn", tôi có nghĩa là an toàn cho hầu hết mọi người ngày nay. Khi làm việc với: bộ chọn giả đã kiểm tra và bộ kết hợp + (anh chị em liền kề), bạn luôn phải không hỗ trợ trong các trình duyệt cũ hơn (fe ,: đã kiểm tra không được hỗ trợ trong IE8). Sau đó, một lần nữa, có các bản sửa lỗi javascript khả thi (và dễ dàng) cho điều này và tỷ lệ phần trăm kết hợp của những người sử dụng các trình duyệt lỗi thời này mà không có hỗ trợ javascript nhỏ đến mức chúng có thể được coi là vô hạn. Ngay cả sau đó, nếu bạn thực sự cần hỗ trợ IE8, bạn luôn có thể sắp xếp lại việc chuyển đổi để hoạt động như một danh sách nút radio thông thường bằng cách sử dụng các bản hack IE của bạn.

Nếu bạn là một người thích cấu trúc như tôi, bạn có thể không quá vui khi đặt nút radio trước nhãn (theo quan điểm cấu trúc, sẽ không có ý nghĩa gì khi bạn không thể chọn thứ gì đó mà bạn không biết nhãn). Một lần nữa, một ít javascript sẽ giúp bạn áp dụng các lớp tập trung / hoạt động vào thư mục gốc (.toggle) nếu bạn quyết định đặt trường đầu vào phía sau nhãn.

Phần kết luận

Tạo kiểu cho các yếu tố đầu vào vẫn là một công việc rất khó khăn, nhưng khi nói đến toggles tôi cảm thấy rằng phương pháp trên đủ vững chắc để sử dụng, thậm chí còn thể hiện một số cơ chế dự phòng trình duyệt phù hợp. Hy vọng sẽ đến lúc bóng tối mở ra tất cả các cánh cửa cho các hình thức theo kiểu tùy chỉnh, nhưng bây giờ tôi nghĩ khả năng truy cập vẫn vượt qua thiết kế vì các yếu tố hình thức thường là một phần thiết yếu của trang web của chúng tôi. Vì vậy, hãy cẩn thận và chỉ khi bạn chắc chắn rằng bạn không xa lánh một lượng khán giả của chúng tôi.



Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 3701