html中关于checkBox选中样式设置

这时要对checkbox进行处理

我总结的一个方法就是根据checked去进行设置

例子：

 p  input name= area type= checkbox html' target='_blank'>value= 1 id= check1 /  label for= check1 桥西区 /label  /p 

这里我把checkbox和label写在p标签里，这样既可以实现点击文字选中。

选中后样式控制：

/*选矿*/ .select-ul li p label, .type-list-ul li p label{ font-size: 0.28rem;color: #666; width: 100%;height: 100%;display: inline-block; border-color: #666; border-style: solid; border-width: 1px; border-radius: 0.1rem; .type-list-ul li p label{width: auto;padding: 0 0.1rem;} .select-ul li p{ height: 0.5rem; width: 1.5rem; display: inline-block; line-height: 0.5rem; .type-list-ul li p{ /*padding: 0 0.1rem;*/ height: 0.5rem; /* width: 1.5rem; */ display: inline-block; line-height: 0.5rem; .select-ul li p input[type=checkbox]:checked + label, .type-list-ul p input[type=checkbox]:checked + label{ border-color: #FA8072; color: #FA8072; }

总结就是我通过

 .select-ul li p input[type=checkbox]:checked + label{}

来控制样式，

一般区域选择都会使checkbox样式隐藏，只留下字体框，点击后变色来提高用户体验

拓展：

在做网页的时候一般会有一个需求：点击一段文字信息的同时选中某个checkbox

旧处理方式是在这段文字上加上点击事件触发checkbox的选中事

//jq中：//选中$( #ID ).attr( checked , checked //不选中$( #ID ).removeAttr( checked //js中： var boxes = document.getElementsByName( test boxes[i].checked = true;

这里提供一种便利的方法：

 p  input name= fittype type= checkbox value= 8 id= checkin8 /  label for= checkin8 其他 /label /p 

将input和label放在同一个标签p中同时lable的for属性的值等于input的id属性值就可以实现点击label同时控制input

以上就是html中关于checkBox选中样式设置的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。