html5复选框怎么设置样式,html中关于checkBox选中样式设置

例如外卖服务区域，选择时为多选，且一般隐藏checkbox样式框。只留下label字体和设置的外边框来进行选中样式控制，以此来提高用户体验。

这时要对checkbox进行处理

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

例子：

桥西区

这里我把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;

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

其他

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

html5复选框怎么设置样式,html中关于checkBox选中样式设置相关推荐

html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
html5复选框控制按钮状态,HTML input checkbox复选按钮简介说明
摘要: 下文讲述html代码中input type='checkbox'时的相关属性简介说明,如下所示: input type='checkbox' 简介当input标签中type='checkbo ...
html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
html checkbox复选框更换背景,js实现点击切换checkbox背景图片的简单实例
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码图片背景为白色表示未勾选状态 ,背景 ...
layui table 复选框跳页后再回来保持原来选中的状态
layui table默认跳页后不存在源页面选中的状态.如果要实现记录源页面的选中状态,需要定义一个全局变量来记录数据选中状态. 1.修改table.js ;layui.define(["l ...
Ext_单选框和复选框_Ext.form.Radio和Ext.form.Checkbox
<mce:script type="text/javascript"><!-- /* Ext.form.Checkbox和Ext.form.Radio配置表: b ...
layui复选框怎么取值_layui如何获取checkbox复选框的值
layui如何获取checkbox复选框的值发布时间:2020-10-21 17:07:09 来源:亿速云阅读:164 作者:Leah 本篇文章给大家分享的是有关layui如何获取checkbox ...
layui添加复选框_对layui初始化列表的CheckBox属性详解，初始化属性
对layui初始化列表的CheckBox属性详解,初始化属性通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式 ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...

html5复选框怎么设置样式,html中关于checkBox选中样式设置

html5复选框怎么设置样式,html中关于checkBox选中样式设置相关推荐

最新文章

热门文章