改变input （radio，check）的样式
第一种
- 效果
- html
<input type="radio"> 男<style>input[type=checkbox] {cursor: pointer;position: relative;width: 15px;height: 15px;font-size: 14px;}input[type=checkbox]::after {position: absolute;top: 0;color: #000;width: 15px;height: 15px;display: inline-block;text-align: center;content: ' ';}input[type=checkbox]:checked::after {content: "✓";color: #fff;font-size: 12px;font-weight: bold;background-color: #ff366f;border-radius: 50%; //radio}style>第二种
- 效果
2.html
<style>.hide {display: none;}.square {background-color: #fff;border: 1px solid #bfbfbf;display: inline-block;height: 0.9em;padding: 2px;border-radius: 100%;margin-right: 5px;margin-top: -2px;vertical-align: middle;width: 0.9em;line-height: 1;box-sizing: content-box;}.hide:checked+.square:after {background-color: #ffd958;content: "";display: inline-block;height: 0.9em;width: 0.9em;vertical-align: top;border-radius: 100%;}.hide:checked+.square {border: 1px solid #ffd958;}
style>
<input class="hide" type="radio" name="sex" id="tbb">
<span class="square">span>
<span>bspan>
第三种
- 效果
2.html
<input type="radio"> 男
<style>input[type=checkbox] {cursor: pointer;position: relative;width: 15px;height: 15px;font-size: 14px;}input[type=checkbox]::after {position: absolute;top: -1px;left: 1px;color: #000;content: ' ';}input[type=checkbox]:checked::after {content: "✓";color: #ff366f;font-size: 12px;font-weight: bold;}style>
第四种：添加背景图
- 效果
<input type="checkbox">
<style>input[type=checkbox] {background-color: #fff;-webkit-appearance: none;border: 1px solid #000;width: 14px;height: 14px;border: none;}input[type=checkbox]:checked {background-image: url(../../static/admin/images/icon_2.png);background-size: contain;}
style>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！