最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化。今天把项目中的这个给更新上来。下面就直接还是放代码吧,图就不再截取了,因为外观没发生任何变化,仅仅是内在改变了,话说内在的改变,只有你去了解你才知道,人不就是这样吗?

HTML部分:

<input type="checkbox" id="my_checkbox1" class="my_checkbox">
<label for="my_checkbox1" class="checkbox_label">自定义的复选框</label>

下面是CSS样式部分:

/*
*自定义的checkbox
*/ /*设置复选框描述文字为相对定位,因为下面要在此label下面设置两个伪类,基于它进行定位。*/
label.checkbox_label {
position: relative;
display: inline-block;
padding: 2px 9px;
-webkit-user-select: none;
user-select: none; /*禁止选中label中的文字,因为勾选时双击了很容易选中*/
}
/*隐藏原生的input复选框*/
.my_checkbox {
opacity: 0;
}
/*after伪类生成固定大小的选框,边框颜色设置为灰色,定位到隐藏的checkbox位置上*/
label.checkbox_label::after {
content: "";
display: block;
width: 15px;
height: 15px;
border: 1px solid #d9d9d9;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 4px;
left: -15px;
z-index: 1;
cursor: pointer;
-webkit-transition: all .2s;
transition: all .2s;
}
/*原生checkbox hover时,此时自定义的伪类选框边框颜色变化为蓝色*/
.my_checkbox:hover+label.checkbox_label::after {
border-color: #1890ff;
}
/*原生的checkbox选中后,对应的自定义选框添加边框颜色和背景颜色*/
.my_checkbox:checked+label.checkbox_label::after {
border-color: #1890ff;
background-color: #1890ff;
}
/*生的checkbox选中后,由于自定义的选框背景为纯色,故这里又定义了一个before伪类来模拟勾选的对勾,这里用一个盒子的边框模拟对勾选中符号*/
.my_checkbox:checked+label.checkbox_label::before {
content: "";
display: block;
width: 6px;
height: 10px;
border-bottom: 2px solid #fff;
background-color: #1890ff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
top: 5px;
left: -10px;
z-index: 2;
box-sizing: border-box;
}

思路分析:自定义的复选框通过label下的伪类生成,一个生成复选框的方框,一个生成复选框的勾选符号即可。然后根据原生checkbox的checked值进行切换选中和未选中的样式。

下面的是之前写的,多写了span  。。。。。。

------------------------------------------------长长长长的分割线----------------------------------------------------------继续分割-------------------------------------------------------------该结束了吧-------------------------------------------------------

话不多说,直入主题。众所周知原生的checkbox复选框、radio单选按钮、select选择框,不同浏览器差别较大,最重要的一点是不怎么好看,如果直接拿原生用,可能会影响整体的美观。项目中用的第三方UI这些都已经很完备,但是在小型项目不想采用第三方UI或者使用的是Bootstrap等没有定制的checkbox样式时,就需要自己去做一个对应的复选框了。本次本着让你改动最小的情况下用纯CSS做了一些自定义的,相对美观的input特殊元素,本节为自定义复选框checkbox。如下图:

下面直接放代码:

HTML部分:

<label for="my_checkboc">
<input type="checkbox" id="my_checkboc" class="my_checkbox">
<!--增加的一个自定义复选框元素span只要在其上应用样式-->
<span class="new_checkbox"></span>
复选框1
</label>

注意,这个HTML结构,label标签最外层,里面包含一个原生checkbox和一个需要自定义样式的span,用来定义checkbox样式。

CSS部分:

label {
position: relative;
} label .new_checkbox {
display: block;
width: 14px;
height: 14px;
border: 1px solid #d9d9d9;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 4px;
left: 2px;
z-index: 1;
cursor: pointer;
-webkit-transition: all .2s;
transition: all .2s;
} label .new_checkbox:hover {
border-color: #1890ff;
} .my_checkbox {
opacity: 0;
} .my_checkbox:checked+span {
border-color: #1890ff;
background-color: #1890ff;
} /*关联checkbox的值*/
.my_checkbox:checked+span::before {
content: "";
display: block;
width: 6px;
height: 10px;
border-bottom: 2px solid #fff;
background-color: #1890ff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
top: 0;
left: 4.5px;
box-sizing: border-box;
}

定义好span的样式,定位到合适的位置,对原来的checkbox设置透明的为0,这样样式部分就可以了。下一步就是把点击选中加进去。由于lable和checbox时绑定的,故点击label区域,即可将改checkbox选中,此时需要对自定义的span添加选中样式即可。用css “+”选择器,如代码中所示,在checkbox选中时,其后一个span元素将会添加:before伪类,显示选中的图标。图中的选中对勾图标为只有有边框和下边框的长方体旋转而成。

如有疑问请留言,这个时暂时这样写,后面会更新,以及相关的纯css打造的radio复选框和js打造的select单选框,供大家参考。

自定义常用input表单元素一:纯css 实现自定义checkbox复选框的更多相关文章

  1. 自定义常用input表单元素三:纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  2. 自定义常用input表单元素二:纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  3. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ZH奶酪:纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  5. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  6. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  7. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  8. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  9. mui弹出输入法遮住input表单元素

    转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素   问题如下:当我用mui开发app时,在mui-sc ...

随机推荐

  1. Apache Hudi异步Compaction方式汇总

    本篇文章对执行异步Compaction的不同部署模型一探究竟. 1. Compaction 对于Merge-On-Read表,数据使用列式Parquet文件和行式Avro文件存储,更新被记录到增量文件 ...

  2. ES6 数组方法库

    文章目录 多维数组降维成一维数组 reduce() 回调 flat() 多维数组降维成一维数组 reduce() var arr1 = [[0, 1], [2, 3], [4, 5]]; var ar ...

  3. matlab外部程序接口-excel

    在excel中使用matlab 内容: 1.Spreadsheet Link 程序 安装与启动 1 打开excle->文件->选项 2.加载项->转到 3.浏览(可用加载宏,本来没有 ...

  4. 一个提高N倍系统新能的编程点,却总是被普通开发们遗忘

    位运算这个概念并不陌生,大多数程序员在进入这个领域的时候或多或少都接触过位运算,估计当时都写过不少练习题的. 位运算本身不难,困难的是大家没有学会在系统设计时用上它,提高系统性能,增加你的不可替代性. ...

  5. js实现表单验证

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. python+pymysql访问mysql数据库

    今天跟大家分享两种场景的python连接MySQL方法: 场景一:连接远程MySQL 首先,安装pymysql:在命令行执行pip install pymysql指令. 然后,导入pymysql: i ...

  7. Centos-切换用户身份-su

    su 切换用户身份 相关选项 - 加载相应用户下环境变量 -c   使用某个身份执行一个指令 -m  改变用户身份不改变环境变量 切换为超级用户 su - 普通用户切换为超级用户需要输入密码,超级用户 ...

  8. 使用Ajax新闻系统管理需求分析

      新闻系统管理需求分析 1.1项目背景 新闻发布系统(News Release System or Content Management System),是一个基于新闻和内容管理的全站管理系统,本系 ...

  9. 【题解】[APIO2010]特别行动队

    Link 题目大意:一段区间的贡献是\(ax^2+bx+c,x=\sum v\),求一个划分让总区间的价值最大.分段必须连续. \(\text{Solution:}\) 设计\(dp[i]\)表示前\ ...

  10. 最全vue的vue-amap使用高德地图插件画多边形范围

    一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...