javascript - 在使用CSS进行选择时,javascript填充复选框

  显示原文与译文双语对照的内容

选中时是否可以用 background 颜色填充复选框? 也可以禁用'滴答'本身。

我该如何实现这个? 我应该看看这个 jquery/javascript?

小提琴演示: 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>


 
时间: 原作者:

以下是定制复选框的一个漂亮的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

试着用不透明度和尺寸玩。

...