使用CSS怎么实现一个单选框和复选框功能
使用CSS怎么实现一个单选框和复选框功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果，<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的内容时，浏览器就会自动将焦点转到和该标签相关联的控件上；<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。
<label>标签语法格式：
<labelfor="关联控件的id"form="所属表单id列表">文本内容</label>
关联控件的id一般指的是input元素的id；在html5中还新增了一个属性form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；当<label>标签不在表单标签<form>中时，就需要使用form属性来指定所属表单；
<label> 元素没有特别的样式考虑——结构上，<label> 是简单的行内元素，所以可使用和 <span> 或 <a>元素大致相同的方式来应用样式。
2.2 CSS3 box-shadow 属性
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
2.3 CSS3 transition 属性
transition 属性用来设置元素过渡效果，四个简写属性为：
transition-property
transition-duration
transition-timing-function
transition-delay
语法
transition: property duration timing-function delay;
2.4 CSS3 :checked 选择器
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
2.5 CSS element+element 选择器
element+element 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。
例如：选择所有紧接着 <div> 元素之后的第一个 <p> 元素:
div+p{ background-color:yellow; }
3 代码实现
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
#main{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
#wrap{
position:relative;
margin:10px;
}
.item{
width:100px;
height:100px;
background-color:#9E9E9E;
position:relative;
box-shadow:0003px#dbe0e3;
transition:all0.5s;
cursor:pointer;
}
.itemimg{
width:20px;
height:20px;
position:absolute;
bottom:0px;
right:0px;
opacity:0;
}
input[type="radio"],
input[type="checkbox"]{
display:none;
}
input:checked+label.item{
box-shadow:0003px#00a3ff;
color:#FFFFFF;
background-color:#efad4c;
}
input:checked+label.itemimg{
opacity:1;
}
.content{
font-size:30px;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<divid="main">
<h2>多选</h2>
<divid="wrap">
<inputtype="checkbox"name="1"id="item1"/>
<labelfor="item1">
<divclass="item">
<divclass="content">
1
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="checkbox"name="1"id="item2"/>
<labelfor="item2">
<divclass="item">
<divclass="content">
2
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="checkbox"name="1"id="item3"/>
<labelfor="item3">
<divclass="item">
<divclass="content">
3
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="checkbox"name="1"id="item4"/>
<labelfor="item4">
<divclass="item">
<divclass="content">
4
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="checkbox"name="1"id="item5"/>
<labelfor="item5">
<divclass="item">
<divclass="content">
5
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<h2>单选</h2>
<divid="wrap">
<inputtype="radio"name="1"id="item6"/>
<labelfor="item6">
<divclass="item">
<divclass="content">
1
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="radio"name="1"id="item7"/>
<labelfor="item7">
<divclass="item">
<divclass="content">
2
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="radio"name="1"id="item8"/>
<labelfor="item8">
<divclass="item">
<divclass="content">
3
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="radio"name="1"id="item9"/>
<labelfor="item9">
<divclass="item">
<divclass="content">
4
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
<divid="wrap">
<inputtype="radio"name="1"id="item10"/>
<labelfor="item10">
<divclass="item">
<divclass="content">
5
</div>
<imgsrc="ico_checkon.svg"/>
</div>
</label>
</div>
</div>
</body>
</html>关于使用CSS怎么实现一个单选框和复选框功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。
