Флажки стиля как кнопки Toggle

Question

На моем сайте пользователи могут публиковать статьи и помечать их соответствующим образом с помощью некоторых предварительно установленных тегов. Эти теги представлены в виде флажков. Пример ниже:

<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Aliens" /> Aliens 
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Ghosts" /> Ghosts 
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Monsters" /> Monsters 

Как вы знаете, флажками будет выглядеть примерно так:

[] Aliens

[о] Призраки

[] Монстры

Хотелось бы, чтобы флажок был одной большой кнопкой со значением внутри него. А затем сделайте эффект «переключения».

[Aliens] [Призраки] [Монстры]

Как бы я идти об этом?

Answer 1

Проверить this из

HTML

<input id="chk_aliens" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Aliens" /> 
<label for="chk_aliens">Aliens</label> 

<input id="chk_ghosts" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Ghosts" /> 
<label for="chk_ghosts">Ghosts</label> 

<input id="chk_monsters" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Monsters" /> 
<label for="chk_monsters">Monsters</label> 

CSS

.vis-hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

label { 
    margin: 10px; 
    padding: 5px; 
    border: 1px solid gray; 
} 

input:focus + label { 
    border-color: blue; 
} 

input:checked + label { 
    border-color: red; 
} 

input:focus:checked + label { 
    border-color: green; 
} 

Обратите внимание, что последний селектор может не работать в старых IE.

Answer 2

Checkboxes, radio кнопки и SELECT элементы имеют очень ограниченные возможности стилизации и широко варьируются в разных браузерах.

Вам лучше выполнить их с помощью стилизованных ссылок или кнопок, а затем с помощью JavaScript установить фактические значения включения/выключения и формы.

Answer 3

Возможно, у вас есть фото с javascript onclick, которое изменит атрибут img source. Затем поместите скрытый контроль с данными id и в том же onclick событии используйте document.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value (с 0 или 1 по умолчанию).

Однако я не знаю, как это сделать без Javascript.

Answer 4

Вы можете заимствовать идеи от этого page! Попытайтесь связать свой текст и флажок. Затем попробуйте использовать jquery для «переключения» метки, связанной с этим флажком.

Затем вы можете использовать стили и изображения, чтобы метки выглядели как контейнеры для флажков. Это то, что я сделал бы.

Answer 5

Это можно сделать с помощью флажков и меток, смежного селектора для сестер, и псевдонима класса CSS3 :selected.

HTML:

<span><input type="checkbox" id="c1"><label for="c1">[ Aliens ]</label></span> 
<span><input type="checkbox" id="c2"><label for="c2">[ Ghosts ]</label></span> 
<span><input type="checkbox" id="c3"><label for="c3">[ Monsters ]</label></span> 

CSS:

input { display:none; } 
input:checked ~ label { color:red; } 

http://jsfiddle.net/drTg2/

Но следует помнить, что это будет легко потерпеть неудачу в старых браузерах - потому что они не знают ~ или :checked. И более старый IE имеет проблемы с флажками, установленными на display:none, - не будет передавать их при отправке формы (хотя это можно преодолеть с помощью других способов скрытия, т. Е. Абсолютного позиционирования экрана).

Если вы не настаиваете на чистом решении HTML/CSS - там много скриптов/{js-framework-of-your-choice} -plugins, которые помогают достичь такого же эффекта.