正文
i复选框样式美化css3,css修改复选框样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何创建CSS3动画复选框
设置HTML创建一个标准的无序列表。
隐藏复选框
然后需要在列表和标签标记的相对位置和填充设置一些样式。
下一步需要使用伪代码在标签之前和之后设置样式。对于这部分，将设置复选框Font Awesome，用一个矢量图标。
现在需要设置图标步骤之前和之后的复选框。
最后一步是设定一个目标，文本框和复选框后的伪代码，并给它一个最大宽度25像素之间和不透明度1。
相关问答
Q1: 高手~~~这个用css怎么写呢？？？
除了用图片之外还有一个办法，就是用css3实现类似的效果。不过css3在ie下支持不好。必须使用支持css3的浏览器才可以，比如谷歌，火狐浏览器等等。一下是代码 供参考：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title源码小筑-CSS3复选框和单选按钮美化/title
style type="text/css"
#holder {
width: 100%;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
.regular-checkbox:checked + label {
background-color: #e9ecee;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
}
.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: -15px;
left: 3px;
color: red;
}
.big-checkbox + label {
padding: 18px;
}
.big-checkbox:checked + label:after {
font-size: 50px;
left: 15px;
}
/style
/head
body
div id="holder"
center
input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /label for="checkbox-2-1"/label
/center
/div
/body
/html
顺便打个广告，推荐一个特效网站 源码小筑-，呵呵
Q2: 怎么用css样式替换checkbox的勾选样式
给你看一段超炫的CSS3代码：是关于checkbox的。
style
*{
margin:0;
padding:0;
}
body{
background-color:#202838;
}
.switch{
width:180px;
height:55px;
position:relative;
margin:100px auto;
}
.switch input{
filter: alpha(opacity=0);
opacity: 0;
z-index: 100;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.switch label{
display:block;
width:80%;
height:100%;
position: relative;
background: linear-gradient(#121823, #161d2b);
border-radius: 30px 30px 30px 30px;
box-shadow:
inset 0 3px 8px 1px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.2);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.switch label i{
display:block;
width:51px;
height:51px;
position:absolute;
left:2px;
top:2px;
z-index:2;
border-radius:50%;
background: linear-gradient(#36455b, #283446);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 12px 12px rgba(0,0,0,0.4);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.switch span {
content: "";
display: inline-block;
position: absolute;
right: 0px;
top: 17px;
width: 18px;
height: 18px;
border-radius: 10px;
background: gradient-gradient(#36455b, #283446);
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(185,231,253,0),
inset 0 0 8px rgba(0,0,0,0.9),
inset 0 -2px 5px rgba(0,0,0,0.3),
inset 0 -5px 5px rgba(0,0,0,0.5);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
}
.switch input:checked ~ span{
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
background: #b9f3fe;
background: gradient-gradient(#ffffff, #77a1b9);
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(100,231,253,1),
inset 0 0 8px rgba( 61,157,247,0.8),
inset 0 -2px 5px rgba(185,231,253,0.3),
inset 0 -3px 8px rgba(185,231,253,0.5);
}
.switch input:checked ~ label i {
left: 63%;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 8px 8px rgba(0,0,0,0.3),
inset -1px 0 1px #b9f3fe;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
/style
body
div class="switch"
input type="checkbox" name="toggle"
label for="toggle"i/i/label
span/span
/div
/body
Q3: 可以用css3改变复选框的背景色和勾上的颜色吗 一定要用js？
用css3可以直接用图片作为背景就可以了，不需要用js。解决方法如下：
1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvas.html。
2、打开已新建的canvas.html文件，修改title标签里的文字内容。
3、在body/body标签内，插入一个canvas标签，并设置id属性值。
4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。
5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。
6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。
7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。
Q4: html中怎样美化checkbox复选框
checkbox那个框的样子是不会变大的，但触发区域可以通过你设置width height样式变大。对那个框样子不满意的话，可以将它透明度设为0，下面放一个样式中意的div，这样能够做到看上去是在点击那个div。
如果我的回答没能帮助您，请继续追问。
Q5: css怎样改变复选框的样式
1、首先，需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下：
/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden;
}
2、开始创建复选框区的HTML。代码如下：
section
!-- Checbox One --
h3Checkbox One/h3
div class="checkboxOne"
input type="checkbox" value="1" id="checkboxOneInput" name="" /
label for="checkboxOneInput"/label
/div
/section
3、用一个DIV元素包含checkbox，使用它们来做黑色条带和圆角。代码如下：
/*** Create the slider bar***/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}
4、当选中复选框后的判定代码。代码如下
/*** Move the slider in the correct position if the checkbox is clicked**/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}
复选框选中前。
复选框选中后。
