button CSS

最新推荐文章于 2021-06-16 23:05:17 发布

always007

最新推荐文章于 2021-06-16 23:05:17 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/always007/article/details/78061160

版权

<html>
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div class="checkbox">
<label>
<input type="checkbox" class="cs_checkbox">
<span class="checkbox-icon"></span>
Checkbox
</label>
</div>
<div class="radio">
<label>
<input type="radio" class="cs_radio" name="optionsRadios" id="optionsRadios1" value="option1">
<span class="radio-icon"></span>
Radio
</label>
</div>

<head>
<style type="text/css">
.radio {
display: none;
}
.radio + .radio-icon {
position: relative;
vertical-align: middle;
}
.radio + .radio-icon:before {
content: "\f3a6";
font-family: "Ionicons";
color: #ccc;
font-size: 22px;
}
.radio:checked + .radio-icon:before {
content: "\f3a7";
color: red;
}

</style>
</head>

<body>
<label>
<input type="radio" name="radio" class="radio" />
<span class="radio-icon"></span>
ラジオボタン1
</label>
<label>
<input type="radio" name="radio" class="radio" />
<span class="radio-icon"></span>
ラジオボタン2
</label>
</body>

</html>

优惠劵

always007

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
button CSS

Checkbox Radio .radio { display: none;}.radio + .radio-icon { position: relative; vertical-align: middle;}.radio + .radio-icon:before {
复制链接

扫一扫