input控件的checkbox属性自定义勾选框
思路
首先隐藏input默认勾选框
通过绑定label标签,设置label的样式来设置勾选框
效果
在这里插入图片描述
代码
# html中input的checkbox定义,使用for循环创建多个checkbox并绑定到label上
<div class="tab_1" v-for="(i, index) in all_stu_ls">
<input :id="index" class="tab_1_title" type="checkbox" :value="i['id']" v-model="check_box_ls">
<label :for="index">{{i.stu_name}}</label>
</div>
# css中首先隐藏默认,再自定义设置label样式
input[type=checkbox]{ # 隐藏默认样式
visibility: hidden;
}
input[type="checkbox"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 5vw; # 设置选框的宽度
height: 5vw; # 设置选框的高度
margin-right: 4vw; # 选框距离label文字的距离
margin-left: -2vw; # 选框拒了左边界的距离
border-radius: 1vw; # 选框的圆角属性
background-color: silver;
text-indent: 0vw;
line-height: 5.2vw; # 涉及对钩的位置
vertical-align: 0vw;
}
input[type="checkbox"]:checked + label::before {
content: "\2714"; # 选中时的样式 \2713是较细的对钩
color: #FFFFFF; # 样式的颜色
background-color: yellowgreen; # 选中的背景色
}
.tab_1 label{ # label字体的样式
width: 60vw;
height: 16vw;
font-family: PingFangSC-Regular;
font-size: 4.3vw;
color: #000000;
}
注意:1、其中的标签,文字的大小,单位需要根据自己的需求调整。2、文中的注释并不是使用html和css合法注释,需要自己手动删除。
---------------------
作者:MrNoboday
来源:CSDN
原文:https://blog.csdn.net/MrNoboday/article/details/83067737
版权声明:本文为博主原创文章,转载请附上博文链接!
input控件的checkbox属性自定义勾选框的更多相关文章
- DEV控件中GridView中的复选框与CheckBox实现联动的全选功能
最初的界面图如图1-1(全选框ID: cb_checkall DEV控件名称:gcCon ): 要实现的功能如下图(1-2 1-3 1-4)及代码所示: 图1-2 图1-3 图1-4 O(∩_∩ ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- 如何给ActiveX控件添加“事件”“属性”“标准事件”“自定义事件”等一些相关操作
上一篇小编带大家熟悉了一下ActiveX的建立以及相关的概念,(http://blog.csdn.net/u014028070/article/details/38424611) 本文介绍下如何给控件 ...
- 自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
- 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...
- C#控件方法及属性大全,望补充
C#控件及常用设计整理 1.窗体 常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来获取或设置窗体的窗口状态 ...
- 关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false
关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false 我们在 Unity 中通过 UI 菜单创建的各种控件,比如 Text, Image 等, ...
- ASP.NET MVC CheckBoxFor为什么会生成hidden input控件
自己开发的公众号,可以领取淘宝内部优惠券 @Html.CheckBoxFor(m => m.Bool) 使用CheckBoxFor方法得到的html代码会是下面这个样子 <input ch ...
- C#控件及常用属性
1.窗体(Form) 1.常用属性 (1)Name 属性:用来获取或设置窗体的名称,在应用程序中可通过Name 属性来引用窗体. (2) WindowState 属性: 用来获取或设置窗体的窗口状态. ...
随机推荐
- List集合复制
方法一: public static void main(String[] args) { // TODO Auto-generated method stub List<String> ...
- 使用FindCmdLineSwitch处理命令行参数
一.四个形式(变体) .function FindCmdLineSwitch(const Switch: string; const Chars: TSysCharSet; IgnoreCase: B ...
- 【Day2】4.第三方模块的安装与使用
课程目标 1. 使用模块 2. 安装第三方模块 使用模块 • 一个.Py文件称之为一个模块(Module) • 好处: 1. 便于代码维护,把很多函数放到不同文件,一个.py文件 的 代码数量少 2. ...
- ES7.x mapping 类型
在将ES从2.3 升级到7.3版本的过程中,mapping是一个过不去的坎,很多类型都发生了变化 7.x常用数据类型:text.keyword.number.array.range.boolean.d ...
- Delphi 抽象方法
- Django学习:创建admin后台管理站点
Django自带一个后台管理站点,方便我们管理数据.这个界面只给管理员使用,并不对大众开放. 创建管理员用户 py manage.py createsuperuser 如下图所示: 用户名不填的话,默 ...
- 《浏览器工作原理与实践》<07>变量提升:JavaScript代码是按顺序执行的吗?
讲解完宏观视角下的浏览器后,从这篇文章开始,我们就进入下一个新的模块了,这里我会对 JavaScript 执行原理做深入介绍. 今天在该模块的第一篇文章,我们主要讲解执行上下文相关的内容.那为什么先讲 ...
- 使用python下载图片(福利)
刚学python 没多久, 代码处处是漏洞,也希望各位大佬理解一下 爬出来的图片... 使用的 是 https://www.tianapi.com/ 接口下的 美女图片... (需要自己注册一个账号 ...
- 学习elasticsearch(一)linux环境搭建(2)——启动elasticsearch
在启动访问es的过程中遇到了各种的奇葩问题. 1.网上各种版本的启动方式让人眼花缭乱不知如何启动.简单粗暴——到es的bin目录下直接 执行 ./elasticsearch //显示启动,ctrl+c ...
- Loadrunner:脚本编写通用模板(Http协议类型)
1. 背景 对于 Http协议,Loadrunner 脚本可以使用通用模板反复粘贴,只需要修改其中的 URL 和 传参,就可以完成一整个业务 2. Get 类型的接口 web_custom_reque ...