Можно ли заполнить флажок цветом фона, если он установлен? Также, чтобы отключить саму «галочку».
Как мне этого добиться? Должен ли я смотреть на jQuery / Javascript для этого?
Демонстрация Fiddle: http://jsfiddle.net/119a7e8r/
li.squaredTwo li label {
display:none
}
input[type=checkbox]:checked {
background:red
}
<ul>
<li id='field_1_20' class='gfield squaredTwo field_sublabel_below field_description_below' >
<label class='gfield_label' >Is it free</label>
<div class='ginput_container ginput_container_checkbox'>
<ul class='gfield_checkbox' id='input_1_20'>
<li class='gchoice_1_20_1'>
<input name='input_20.1' type='checkbox' value='Yes' id='choice_1_20_1' tabindex='35' />
<label for='choice_1_20_1' id='label_1_20_1'>Yes</label>
</li>
</ul>
</div>
</li>
</ul>
3 ответа
Вот отличное CSS-решение для пользовательских флажков:
.hideme {
display: none;
}
.woo {
cursor: pointer;
}
.hideme + .woo:before {
width: 10px;
height: 10px;
border: 2px solid gray;
border-radius: 2px;
box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
background: red;
position: relative;
display: inline-block;
margin-right: 1ex;
content: "";
}
.hideme:checked + .woo:before {
background: green;
}
<input type="checkbox" class="hideme" id="myinput" /><label class="woo" for="myinput">Click me</label>
Я думаю, что вы должны смотреть на jQuery для этого. Вот несколько примеров других вопросов о переполнении стека, с рабочим jsfiddle
hope this helps!
Моя отправная точка для просто чистого CSS на этом была бы что-то вроде этого:
HTML
<input type="checkbox">Hello</input>
CSS
input[type=checkbox] {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: bottom;
}
input[type=checkbox]:after {
content: "";
border-bottom: 10px solid red;
border-top: 10px solid red;
display: block;
opacity: 1;
}
input[type=checkbox]:checked:after {
border-bottom: 10px solid blue;
border-top: 10px solid blue;
}
Демонстрация: http://codepen.io/newanalog/pen/LppBgv
Попробуйте поиграть с непрозрачностью и размерами.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.