input checkbox样式美化
最近在学校做自己的学习实践项目中,用到了checkbox,想实现的是,在登陆界面的中的那个记住我的选框。我们都知道,原生的checkbox样式不能满足咱们的需求。所以接下来,让我们一起动动手,换种方式美化一下吧。
以下我们将会学到的知识技巧吧:
- div居中于页面
- checkbox样式美化
- label for属性的使用
话不多说,用图说话:
【原生样式】
[美化后样式]
【用到的icon】(可右键保存本地)
这里的icon可以自己去找,我这里用的像素尺寸是32的,大家也可以到iconfont-阿里巴巴矢量图标库网下载:http://www.iconfont.cn
思路
- div居中于页面
首先是给div一个宽高,这个为了后面的居中定位,继续,给个绝对定位absolute,其次就是把top和left都设置成50%,这里可能会有的同学说,这样不就可以居中了,其实你仔细的瞅一眼,它并没有居中,我们都知道原点坐标为屏幕的左上角,div定位也是根据自身的左上角来定位,所以我们还需要加上margin-top:-12px ;和margin-left:-40px ;这里的数值就是div宽高的一半,这样,我们就可以看到它居中啦。
div {
width: 80px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin:-12px 0 0 -40px ;
text-align: center;
}
拿本次例子来演示效果图:
- checkbox样式美化
首先,我们需要把checkbox的透明度设置为0: opacity: 0; 然后我们需要用到span,作为checkbox的选中状态显示。接着span一个背景icon,然后根据icon的分辨率尺寸大小设置背景图片的一些属性,关键是它: background-position-y: 20px;,目的是:当checkbox 未选中的时候,让背景图片挪到一个我们看不见的地方去,当checkbox 选中的时候,让背景图片再挪回来,也就是重置为0:background-position-y: 0px;,剩下的就是给它一个过渡效果,用户体验就更好啦,最后这样就达到我们的目的啦,具体代码如下:
input[type=checkbox]{
width: 16px;
height: 16px;
position: absolute;
opacity: 0;
cursor: pointer;
z-index: 2;
}
span {
position: absolute;
top: 4px;
width: 14px;
height: 14px;
border: 1px solid #d6d6d6;
border-radius: 3px;
background: url(img/fork_green.png);
background-size: 14px;
background-repeat: no-repeat;
background-position-x: 0px;
background-position-y: 20px;
-webkit-transition: background-position-y 0.1s linear;
-o-transition: background-position-y 0.1s linear;
transition: background-position-y 0.1s linear;
}
input[type=checkbox]:checked+span {
background-position-y: 0px;
}
- label for属性的使用
大家有没有发现,在上面代码中,单击记住我的文字没有效果!!!有些同学会问,这是为啥,那我们这里就是解决这个问题,而我又不想用JS去写,这么麻烦,还得if else弄来弄去,对吧。
- HTML
for 属性规定 label 绑定的表单元素,element_id为label 绑定的元素的 id。使用方法如下:
<label for="element_id">
/*例如*/
<input type="checkbox" id="remember-me-checkbox">
<label for="remember-me-checkbox">记住我 </label>
该说的说完了,上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox美化</title>
</head>
<style type="text/css">
#remember-password-container {
width: 80px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
margin:-12px 0 0 -40px ;
text-align: center;
}
#remember-password-container .remember-password-content {
position: relative;
}
#remember-password-container input[type=checkbox]{
width: 16px;
height: 16px;
position: absolute;
opacity: 0;
cursor: pointer;
z-index: 2;
font-size: initial;
}
#remember-password-container .remember-me-label {
color: #000;
margin-left: 25px;
cursor: pointer;
}
#remember-password-container .remember-me-label::selection{
background: rgba(0,0,0,0);
}
#remember-password-container span {
position: absolute;
top: 4px;
width: 14px;
height: 14px;
border: 1px solid #d6d6d6;
border-radius: 3px;
background: url(img/fork_green.png);
background-size: 14px;
background-repeat: no-repeat;
background-position-x: 0px;
background-position-y: 20px;
-webkit-transition: background-position-y 0.1s linear;
-o-transition: background-position-y 0.1s linear;
transition: background-position-y 0.1s linear;
}
#remember-password-container input[type=checkbox]:checked+span {
background-position-y: 0px;
}
</style>
<body>
<div id="remember-password-container">
<div class="remember-password-content">
<input type="checkbox" id="remember-me-checkbox">
<span></span>
<label class="remember-me-label" for="remember-me-checkbox">记住我 </label>
</div>
</div>
</body>
</html>
结束语
这个编辑工具使用不是很顺手,大家凑活着看吧,请多多谅解,同时有哪些错误点误导大家的,也请大家留言多多吐槽一起学习。这次笔记就写到这里啦!谢谢大家(^_^)。