效果如下
通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。
1.css 如下
- #rulelabel{
- background-image:url(../static/image/unselected.png);
- background-repeat: no-repeat;
- background-size: 0.4rem 0.4rem;
- display: inline-block;
- height: 0.4rem;
- 0.4rem;
- position: absolute;
- top: 0.28rem;
- left: -0.03rem;
- }
- #agreerule:checked + label{
- background-image:url(../static/image/selected.png);
- }
- /*将原checkbox宽高设为0，使其不显示*/
- #agreerule{
- 0;
- height: 0;
- padding: 0;
- margin: 0;
- }
#rulelabel{
background-image:url(../static/image/unselected.png);
background-repeat: no-repeat;
background-size: 0.4rem 0.4rem;
display: inline-block;
height: 0.4rem;
0.4rem;
position: absolute;
top: 0.28rem;
left: -0.03rem;
}
#agreerule:checked + label{
background-image:url(../static/image/selected.png);
}
/*将原checkbox宽高设为0，使其不显示*/
#agreerule{
0;
height: 0;
padding: 0;
margin: 0;
}
2.html 如下
- <div>
- <label>
- <input type="checkbox" name="agreerule" id="agreerule" tabindex="5" checked/>
- <label id="rulelabel" for="agreerule"></label>
- 同意QQ的服务协议和隐私权声明
- </label>
- </div>
涉及的知识点：
兄弟选择器(+ 和 ~)
1. + 选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
比如：
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
效果：
可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。
２. ~ 选择器 作用是查找某一个指定元素的后面的所有兄弟结点。
示例代码：
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>