Question

css怎样改变复选框的样式

就像图片那样.....大哥大姐们，帮帮小弟吧
有没有例子什么的，怎么该啊，用js也行

Answer 1

1、首先，需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下：

/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden;
}
2、开始创建复选框区的HTML。代码如下：

<section>
 <!-- Checbox One -->
 <h3>Checkbox 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;
}

复选框选中前。

复选框选中后。

Answer 2

其实这个不能算是复选框了，用<span style="background:没勾的图"></span>
用JS控制，当你鼠标点击span的时候，改变他的background；就变成 这样好看的

Answer 3

其实这个不能算是复选框了，用<span style="background:没勾的图"></span>
用JS控制，当你鼠标点击span的时候，改变他的background；就变成 这样好看的

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

Answer 4

你这个样式哪来的呀 能给我发一份不

Answer 5

得JS改