怎么用图片取代radio的图标且图片能随着点击而变换

最新推荐文章于 2024-04-08 10:18:27 发布

二小姐姐

最新推荐文章于 2024-04-08 10:18:27 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/dandelionoooo/article/details/78082235

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用CSS来实现性别选择器的方法。通过将输入框隐藏，并利用伪类选择器配合背景图片切换来展示不同的性别选项，提供了一个美观且交互友好的选择界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.radios input[type=radio]{
display: none;
border:none;
}
.radios label{
display:-moz-box;
display:-webkit-box;
display:box;
float:left;
line-height: 60px;
text-indent: 60px;
background-size: 60px 60px;
}

.radio1 {
background:url(<%=basePath%>img/importment_man.png) no-repeat left top;
}
.radio2 {
background:url(<%=basePath%>img/importment_woman.png) no-repeat left top;
}

.radios input[type=radio]:checked + .radio1{
background:url(<%=basePath%>img/importment_man_select.png) no-repeat left top;
background-size: 60px 60px;
}
.radios input[type=radio]:checked + .radio2{
background:url(<%=basePath%>img/importment_woman_select.png) no-repeat left top;
background-size: 60px 60px;

}