隱藏複選框字段HTML

Question

我想創建隱藏的複選框字段，當用戶點擊字段時，它將被檢查。

這是我的例子..

<h3>Choose color</h3> 

<ul class="color-picker list-inline"> 
    <li class="active"><a class="active gray" href="#"></a> 
    </li> 
    <li><a class="yellow" href="#"></a> 
    </li> 
    <li><a class="red" href="#"></a> 
    </li> 
    <li><a class="green" href="#"></a> 
    </li> 
</ul> 

+ CSS（旁觀jsfiddel）

現在我希望把隱藏的複選框，在色塊。

Answer 1

替代他們，我改變了你的標記，使用形式。 JavaScript是沒有必要的（除非你需要支持IE8以上的瀏覽器）

示例代碼：http://codepen.io/anon/pen/Ixira

每一個複選框包括它的標籤，它是透明的：所以當你點擊你實際點擊複選框的顏色。所選顏色的不同樣式通過:checked僞類應用。

標記

<form> 
    <fieldset> 

    <ul> 
     <li> 
     <input type="checkbox" name="y" /> 
     <label>Gray</label> 
     </li>  
     <li> 
     <input type="checkbox" name="r" /> 
     <label>Red</label> 
     </li>  
     <li> 
     <input type="checkbox" name="g" /> 
     <label>Green</label> 
     </li>  
     <li> 
     <input type="checkbox" name="b" /> 
     <label>Blue</label> 
     </li>    
    </ul> 

    </fieldset> 
</form> 

---

CSS：

ul { 
    list-style: none; 
} 

li { 
    position: relative; 
    height: 40px; 
    width: 40px; 
    margin: 5px 0; 
} 

input { 
    position: absolute; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
    opacity: .01; 
    cursor: pointer; 
} 


label { 
    display: block; 
    width: 100%; 
    height: 100%; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    text-indent: 100%; 
    overflow: hidden; 

} 

[name="y"] + label { background: gray; } 
[name="r"] + label { background: red; } 
[name="g"] + label { background: green; } 
[name="b"] + label { background: blue; } 

input:checked + label { 
    border: 5px #fff double; 
} 

---

注意：您也可以得到同樣的行爲，如果你display: none您的複選框和標籤上使用一個for屬性（在該情況也使用標籤上的cursor: pointer以獲得更好的可用性）—這裏的這種方法的一個例子：http://codepen.io/anon/pen/wGBvq

Answer 2

這裏http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/是一個例子，你如何可以隱藏你的複選框，並用圖形

Answer 3

如果只有一種顏色，你想選擇你可以使用單選按鈕，而不是複選框，這是一個更好的主意。

確保你有一個標籤可以完成大部分工作。

input[type="radio"]:checked+label { 
    border: 3px solid blue; 
} 

input { 
    display: none; 
} 

下面是使用標籤選擇框的小提琴。您可能必須在IE中顯示單選按鈕，因爲使用標籤進行選擇並不總是可行。

http://jsfiddle.net/Q5T4J/1/

Answer 4

只是修改了代碼：

<ul class="color-picker list-inline"> 
    <li> 
     <input type="checkbox" id="gray"> 
     <label for="gray" class="gray"></label> 
    </li> 
    <li> 
     <input type="checkbox" id="yellow"> 
     <label for="yellow" class="yellow"></label> 
    </li> 
    <li> 
     <input type="checkbox" id="red"> 
     <label for="red" class="red"></label> 
    </li> 
    <li> 
     <input type="checkbox" id="green"> 
     <label for="green" class="green"></label> 
    </li> 
</ul> 

只是有我做了一些改變。爲了使它看起來不錯，你可能需要投入更多的時間。

.color-picker li { 
      padding: 10px; 
      margin: 10px; 
      border-radius: 4px; 
      width:40px; 
      height:50px; 
     } 
     .color-picker label { 
      display: block; 
      padding: 20px; 
      border-radius: 4px; 
     } 
     .color-picker .gray { 
      background-color: gray; 
     } 
     .color-picker .yellow { 
      background-color: yellow; 
     } 
     .color-picker .red { 
      background-color: red; 
     } 
     .color-picker .green { 
      background-color: green; 
     } 
     .color-picker input[type='checkbox'] { 
      visibility: hidden; 
     } 

     .color-picker label { 
      border: 1px solid transparent; 
     } 

     .color-picker input:checked + label { 
      border-color: black; 
     } 

你改後的演示：小提琴