复选框 | 自定义CSS美化后的复选框 – 爱CSS - 每多学一点知识就少写一行代码

关闭边栏(ESC)打开边栏(ESC)

最近在为博客添加评论回复时发邮件，在发表评论时，可以由用户决定是否有回复时邮件通知，这个复选框原来的样式很不好看，所以决定来一次美化，以下是美化的全部操作，可以自行修改成更多的、漂亮的样式出来。思路：先隐藏原来的复选框、自定义一个外框、自定义一个Checked时的样式如打勾、Label的其它美化

一、Html结构：

<input type="checkbox" name="chb" id="chb" value="comments" checked="checked"  class="chk_1"/>
<label for="chb">有人回复时邮件通知我</label>

1 2	<input type="checkbox" name="chb" id="chb" value="comments" checked="checked" class="chk_1"/> <label for="chb">有人回复时邮件通知我</label>

二、CSS样式：

/*把原来的复选框给隐藏*/
.chk_1 { 
    display: none; 
} 
 /*定义复选框文字说明的label样式*/
.chk_1 + label {  
    display: inline-block; 
    position: relative; 
    color:#aaa;
    margin-left:20px;
    padding-left:25px;
} 
/*定义label激活时的样式*/
.chk_1 + label:active { 
    color:#ccc
} 
/*自定义一个框来代替原来的复选框，也可以不用加框*/
.chk_1 + label::before {
	content: '';
	border: 1px solid #ddd;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 0;
}
 /*勾选复选框时的样式*/
.chk_1:checked + label {  
    color: #000; 
} 
 /*勾选复选框时，自定义的外边框样式*/
.chk_1:checked + label:before{
     border-color:#999;
}
/*勾选时弄个打勾的符号在文字前边，代替原来复选框的勾*/
.chk_1:checked + label:after { 
    content: '\2714';
    position: absolute; 
    top: -1px; 
    left: 4px; 
    color: #758794; 
    width: 100%; 
    font-size: 1.2em; 
}

/*把原来的复选框给隐藏*/

.chk_1 {

display: none;

}

/*定义复选框文字说明的label样式*/

.chk_1 + label {

display: inline-block;

position: relative;

color:#aaa;

margin-left:20px;

padding-left:25px;

}

/*定义label激活时的样式*/

.chk_1 + label:active {

color:#ccc

}

/*自定义一个框来代替原来的复选框，也可以不用加框*/

.chk_1 + label::before {

content: '';

border: 1px solid #ddd;

width: 20px;

height: 20px;

position: absolute;

left: 0;

top: 0;

}

/*勾选复选框时的样式*/

.chk_1:checked + label {

color: #000;

}

/*勾选复选框时，自定义的外边框样式*/

.chk_1:checked + label:before{

border-color:#999;

}

/*勾选时弄个打勾的符号在文字前边，代替原来复选框的勾*/

.chk_1:checked + label:after {

content: '\2714';

position: absolute;

top: -1px;

left: 4px;

color: #758794;

width: 100%;

font-size: 1.2em;

}

三、完成后的效果：

上面只是其中的一种效果，继续折腾了一下，于是有了下面二种效果，其实这种自定义的复选框可以自行CSS出好多种效果，最终本站用的绿红按钮间切换的。HTML结构是一样的，下面只贴出不同的CSS.

一、有打勾渐变效果的：

/*把原来的复选框给隐藏*/
.chk_1 { 
    display: none; 
} 
 /*定义复选框文字说明的label样式*/
.chk_1 + label {  
    display: inline-block; 
    position: relative; 
    color:#aaa;
    margin-left:20px;
    padding-left:25px;
} 
/*定义label激活时的样式*/
.chk_1 + label:active { 
    color:#ccc
} 
/*定义复选框外边的框*/
.chk_1 + label::before{
       content:'';
       position:absolute;
       left:0;
       top:0;
       width:20px;
       height:20px;
       border:1px solid #ddd;
}
/*自定义一个框来代替原来的复选框，也可以不用加框*/
.chk_1 + label::after {
	content: '\2714';
	position: absolute;
	top: 0;
	left: 0;
	color: #758794;
	font-size: 12px;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
        -webkit-transform:scale(0);
        -webkit-transition:all .3s;
        opacity:0;
}
 /*勾选复选框时的样式*/
.chk_1:checked + label {  
    color: #000; 
} 
/*勾选时弄个打勾的符号在文字前边，代替原来复选框的勾*/
.chk_1:checked + label:before { 
        border-color:#aaa
}
.chk_1:checked + label:after { 
        -webkit-transform:scale(1);
        opacity:1;
}

/*把原来的复选框给隐藏*/

.chk_1 {

display: none;

}

/*定义复选框文字说明的label样式*/

.chk_1 + label {

display: inline-block;

position: relative;

color:#aaa;

margin-left:20px;

padding-left:25px;

}

/*定义label激活时的样式*/

.chk_1 + label:active {

color:#ccc

}

/*定义复选框外边的框*/

.chk_1 + label::before{

content:'';

position:absolute;

left:0;

top:0;

width:20px;

height:20px;

border:1px solid #ddd;

}

/*自定义一个框来代替原来的复选框，也可以不用加框*/

.chk_1 + label::after {

content: '\2714';

position: absolute;

top: 0;

left: 0;

color: #758794;

font-size: 12px;

width: 20px;

height: 20px;

text-align: center;

line-height: 20px;

-webkit-transform:scale(0);

-webkit-transition:all .3s;

opacity:0;

}

/*勾选复选框时的样式*/

.chk_1:checked + label {

color: #000;

}

/*勾选时弄个打勾的符号在文字前边，代替原来复选框的勾*/

.chk_1:checked + label:before {

border-color:#aaa

}

.chk_1:checked + label:after {

-webkit-transform:scale(1);

opacity:1;

}

效果图如下：

二、带ON、OFF的效果：

/*把原来的复选框给隐藏*/
.chk_1 { 
    display: none; 
}

/*美化复选框其把握二种状态：勾选与未勾选二种的样式就行*/
.chk_1 + label {
	display: inline-block;
	position: relative;
	color: #aaa;
	margin-left: 20px;
	padding-left: 65px;
}

.chk_1:checked + label {
	color: #000;
}

.chk_1 + label::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 0px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	z-index: 2;
	transition: all .3s;
}

.chk_1:checked + label::before {
	left: 37px;
}

.chk_1 + label::after {
	content: 'OFF';
	position: absolute;
	top: -3px;
	left: 0;
	width: 60px;
	height: 25px;
	border-radius: 25px;
	background: #ED6F6F;
	color: #fff;
	line-height: 25px;
	padding-left: 28px;
	font-size: 12px;
	transition: all .3s;
}

.chk_1:checked + label::after {
	content: 'ON';
	padding-left: 10px;
	background: #4FB845;
}

/*把原来的复选框给隐藏*/

.chk_1 {

display: none;

}

/*美化复选框其把握二种状态：勾选与未勾选二种的样式就行*/

.chk_1 + label {

display: inline-block;

position: relative;

color: #aaa;

margin-left: 20px;

padding-left: 65px;

}

.chk_1:checked + label {

color: #000;

}

.chk_1 + label::before {

content: '';

position: absolute;

left: 5px;

top: 0px;

width: 18px;

height: 18px;

border-radius: 50%;

background: #fff;

z-index: 2;

transition: all .3s;

}

.chk_1:checked + label::before {

left: 37px;

}

.chk_1 + label::after {

content: 'OFF';

position: absolute;

top: -3px;

left: 0;

width: 60px;

height: 25px;

border-radius: 25px;

background: #ED6F6F;

color: #fff;

line-height: 25px;

padding-left: 28px;

font-size: 12px;

transition: all .3s;

}

.chk_1:checked + label::after {

content: 'ON';

padding-left: 10px;

background: #4FB845;

}

效果图如下：

用Css或插件实现瀑布流布局的问题小结

CSS 2018-10-28 2

前些天小宇提醒了一下，他打算弄一个瀑布流的布局，问了我有没有css直接解决的方法，刚开始我就…

垂直居中的几个方法

CSS 2017-01-02 2

在前端弄水平居中好容易，如果是块状元素，直接使用：margin:0 auto;行间元素只需在父元素中用…

网页底部区域固定在最底部

CSS 2017-01-03 4

这里讨论的底部区域是不用绝对定位的，因为固定的直接用绝对定位就能实现。所以这里说的是除了…

关于移动端input框在微信中和ios中无法输入文字的问题

CSS 2017-08-26 0

制作手机端菜单效果的时候，重新优化了搜索框，但发现手机端不能输入内容，真是一波三折呀，有…

jQuery阻止遮罩层后页面滚动的解决方法

CSS 2018-10-18 4

使用遮罩层效果时，发现遮罩层下面的内容还是会发生滚动，为了阻止遮罩层后页面的滚动，找了许…

display:table和display:table-cell的妙用

CSS 2018-08-04 1

在一些应用中，比如要使文本垂直居中，可以用绝对定位来弄，但有时在左右二栏的结构时，定位就…

评论：4条

评论加载中...

知言

四川省凉山州电信 2017-07-03 10:15 回复
icss
鼠标放上去要显示手型，就自己加上一条：.chk_1 + label:hover{cursor:pointer}

广东省佛山市电信 2017-04-30 21:00 回复
icss
这第一种效果是最初弄的，后来在苹果手机上发现那个勾不适应，所以改成了第二种，最终还是喜欢似苹果的那种带ON、OFF的样式。

广东省佛山市电信 2017-04-30 20:29 回复
wordpress 评论有回复时发邮件通知 – 爱CSS - 每多学一点知识就少写一行代码
[…] 注：在评论页面有个“有人回复时邮件通知我”这个复选框，这个也是DIY后美化的，可以参考这篇文章来修改：CSS美化复选框 […]

浙江省杭州市阿里云BGP数据中心 2017-04-30 13:57 回复

wordpress 评论有回复时发邮件通知

友情墙 | 一个友情链接优化成的一种页面模板

用Css或插件实现瀑布流布局的问题小结

垂直居中的几个方法

网页底部区域固定在最底部

关于移动端input框在微信中和ios中无法输入文字的问题

jQuery阻止遮罩层后页面滚动的解决方法

display:table和display:table-cell的妙用

发表评论取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

【童心致敬•礼赞祖国】红红中国心浓浓爱国情

wordpress 评论有回复时发邮件通知

友情墙 | 一个友情链接优化成的一种页面模板

发表评论 取消回复

发表评论取消回复