爲什麼不使用CSS複選框作爲切換按鈕

Question

我想知道爲什麼我沒有看到這種技術更經常使用。

很多切換按鈕使用JavaScript或jQuery來創建切換功能。

爲什麼你不能只使用複選框輸入和樣式標籤與CSS？此外，你可以把任何你在標籤後想，把一個絕對位置就可以了包裹在一個相對定位input和風格它使用~

http://jsfiddle.net/j63uk/

<input id="button" type="checkbox"> 
<label for="button">button</label> 
</input> 

input { 
display: none; 
} 
label { 
padding:20px; 
position: relative; 
background:green; 
display: inline-block; 
} 
label:hover { 
    background:red; 
    cursor:pointer; 
} 
input[type="checkbox"]:checked + label { 
background:yellow; 
} 

也許點擊在別的能力頁面並禁用JavaScript的切換是主要的好處？

Answer 1

此問題可能更適用於UX Stackexchange。切換按鈕通常是單選按鈕的樣式版本。單選按鈕通常適用於重要的是用戶知道其他選擇（例如，他們想從航空公司購買什麼類別的票）。複選框適用於用戶可以同時選擇多個選項，但對於用戶瞭解提供給他們的不同選項（例如，選擇以下所有適用的選項），仍然很重要。使用複選框來切換單個選項是一種視覺上類似但不易實現樣式化單選按鈕的方式，因爲機器（頁面解析器，搜索引擎等）和屏幕閱讀器不容易理解代碼。從本質上講，單選按鈕在設計開關時更加符合語義的正確方式，它們的樣式可以像開關一樣，就像複選框一樣。因此，我認爲這不是一個更容易實現的問題 - 這是一個問題，它會給你提供最好，最易維護和語義化的代碼，可以被機器和人類訪問。如上所述，您可以在複選框或收音機後面放置一些東西，並使用CSS兄弟選擇器對其進行設置。但更有趣的是，您不必重複標籤或添加額外的HTML來執行此操作，因爲您可以在父元素上添加CSS規則direction: rlt;以從右側渲染元素（因此，您可以直觀地將標籤放置到輸入的左邊，但仍然以.checkbox:checked ~ .label或類似的東西爲目標，因此，你進一步增加了你的應用程序的可用性，並保持類似切換按鈕的樣式優勢。要禁用切換，可以使用帶有for屬性的標籤來模擬此頁面。例如：

<label for="the_toggle">Click me</label> 
// Some random code... blah blah blah... 
<input type="checkbox" id="the_toggle"> 

您可以使用jQuery來切換收音機，複選框等等。值得注意的是：檢查選擇器是not supported in all browsers，但它可以使用Selectivizr啓用。

延伸閱讀：

• Radios vs Selects
• Styling semantic toggle