第一个是文本框
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
img{vertical-align:top;border:0;}
a{text-decoration:none;}
input,texterea{outline:none;}
input[type="button"],[type="reset"],[type="submit"],[type="file"]{curser:pointer;}
html{font-size:14px;font-family:"微软雅黑";color:#666;}
textarea{resize:none;}
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}
label{display: block;width:80px;float:left;}
ul{height:100px;}
ul li{float:left;height:30px;width:110px;}
.ab1{position: relative;}
.p1{position: absolute;left:0;top:30px;width:400px;height:30px;background: green;}
.ab2{position: relative;}
.p2{position: absolute;left:-110px;top:30px;width:400px;height:30px;background: blue;}
.ab3{position: relative;}
.p3{position: absolute;left:-220px;top:30px;width:400px;height:30px;background: yellow;}
.ab4{position: relative;}
.p4{position: absolute;left:-330px;top:30px;width:400px;height:30px;background: orange;}
input:checked+ label span{color:red;}
input:checked+ label p{z-index: 1;}
</style>
</head>
<body>
<form>
<ul class="clearfix">
<li class="clearfix">
<input id="a1" type="radio" value="a" name="aaa">
<label class="ab1" for="a1">
<span class="s1">选项1</span>
<p class="p1" id="a1">
111111111111111111
</p>
</label>
</li>
<li>
<input id="a2" type="radio" value="b" name="aaa">
<label for="a2" class="ab2">
<span class="s2">选项2</span>
<p class="p2" id="a2">
222222222222222222
</p>
</label>
</li>
<li>
<input id="a3" type="radio" value="b" name="aaa">
<label for="a3" class="ab3">
<span class="s3">选项3</span>
<p class="p3" id="a3">
222222222222222222
</p>
</label>
</li>
<li>
<input id="a4" type="radio" value="b" name="aaa">
<label for="a4" class="ab4">
<span class="s4">选项4</span>
<p class="p4" id="a4">
222222222222222222
</p>
</label>
</li>
</ul>
</form>
</body>
</html>
这个的效果直接复制粘贴到网页上看就好
原理很简单
1.先做checked点击效果
lable for 对input进行id绑定 这样在点击input的效果的时候lable也会被同时点击
再将 lable下的div和input进行绑定 因为checked “+”代表同级
所以书写样式是
.aa4:checked+.ab4 .p4{z-index: 1;}这样就是 lable下的自己元素 p和input同时绑定
2.将每个p与lable定位
3.要将每一个lable放在同一排做出选项卡的效果 所以将li设置浮动
因为每一个lable下的div都设置了absolut定位所以四个div会重合
思路类似于 用纯css的hover选择器做简单的轮播图效果 注意提升层级
图片选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
.a{margin:150px;position: relative;}
img{position: absolute;left:0;right: 0;width:155px;margin-top:10px;}
li{list-style: none;float:left;}
p{display: inline-block;padding: 3px;background:#dedede;margin-right: 3px;width:30px;height:30px;text-align: center;}
p:hover{color:red;opacity: .5;}
input{display: block;opacity: 0;}
input:checked+.aa1 .img1{z-index: 1;}
input:checked+.aa2 .img2{z-index: 1;}
input:checked+.aa3 .img3{z-index: 1;}
input:checked+.aa4 .img4{z-index: 1;}
input:checked+.p p{color:#fff;background: red;}
</style>
</head>
<body>
<ul class="a">
<li>
<input type="radio" name="1" id="a1">
<label for="a1" class="aa1 p">
<p>1</p>
<img src="../images/1.png" atl="" class="img1" id="a1"/>
</label>
</li>>
<li>
<input type="radio" name="1" id="a2">
<label for="a2" class="aa2 p">
<p>2</p>
<img src="../images/2.png" atl="" class="img2" id="a2"/>
</label>
</li>>
<li>
<input type="radio" name="1" id="a3">
<label for="a3" class="aa3 p">
<p>3</p>
<img src="../images/3.png" atl="" class="img3" id="a3"/>
</label>
</li>>
<li>
<input type="radio" name="1" id="a4">
<label for="a4" class="aa4 p">
<p>4</p>
<img src="../images/4.png" atl="" class="img4" id="a4"/>
</label>
</li>>
</ul>
</body>
</html>
图片自己上传就好
利用这个的原理 也可以用css修改input标签的按钮样式和效果
这里只需要将插入的图片给一个单独的checked 就可以改变样式