Скрытые поля флажка 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.

Markup

<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; 
     } 

Измененная Demo: скрипка