我们都知道原生的单选与多选按钮样式不能通过CSS来改变,然后还有更加让人不爽的是在不同浏览器下他们的样式也会有很大的差异。
估计很多人都和我一样遇到过,设计师提供效果图中的单选按钮与多选按钮都不是像原生的那样,然而设计要求我们必须做出跟他们效果图上面一样的。
这个时候我们只能通过JS来模拟了。
下面是HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h4>1.请选择您的性别</h4>
<div class="radio-box radio-cur" name="sex">
<label></label>
<span>男</span>
<input type="radio" name="sex" class="fn-hide" />
</div>
<div class="radio-box" name="sex">
<label></label>
<span>女</span>
<input type="radio" name="sex" class="fn-hide