<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<script>
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px';
} else {
document.addEventListener('DOMContentLoaded', setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit);
window.addEventListener('pageshow', function(e) {
if (e.persisted) { setRemUnit();}
});
}(window, document));
</script>
<title>自定义radio样式</title>
</head>
<body>
<style type="text/css">
*{margin:0; padding:0; font-size: 0;}
.qsList{
max-height: 2.933333rem /* 220/75 */;
overflow: scroll;
}
.qsRow{
margin-top: .293333rem /* 22/75 */;
color: #3f4353;
display: flex;
display: -webkit-flex;
justify-content: space-between;
}
.common{
position: relative;
width: 50%;
}
li{
margin-bottom: .266667rem /* 20/75 */;
}
.related{
display: inline-block;
width: .4rem /* 30/75 */;
height: .4rem /* 30/75 */;
border-radius: 50%;
box-sizing: border-box; /* 该样式必须写在这,否则label在切换样式时,大小会发生变化*/
border: 1px solid #ff5450;
vertical-align: middle;
margin-left: .533333rem /* 40/75 */;
}
input[type="radio"]:checked + .related{
background: #ff5450;
background-clip: content-box; /* 规定背景的绘制区域*/
padding: 3px;
}
span{
vertical-align: middle;
font-size: .4rem /* 30/75 */;
}
.multi {
width: .32rem;
height: .32rem;
background-color: #fff;
-webkit-appearance:none;
border: none;
border-radius: 50%;
outline: none;
}
input[type=checkbox] {
background: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_1@1x-d1e660cf3b.png") no-repeat center;
background-size: 100%;
}
input[type=checkbox]:checked{
background: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png") no-repeat center;
background-size: 100%;
}
</style>
<div class="qsList">
<!--单选:radio-->
<ul class="qsRow">
<li class="left common">
<ul>
<li>
<input type="radio" name="qsName" id="11" hidden/>
<label class="related" for="11"></label>
<span>苹果</span>
</li>
<li>
<input type="radio" name="qsName" id="12" hidden/>
<label class="related" for="12"></label>
<span>橘子</span>
</li>
</ul>
</li>
<li class="right common">
<ul>
<li>
<input type="radio" name="qsName" id="13" hidden/>
<label class="related" for="13"></label>
<span>香蕉</span>
</li>
<li>
<input type="radio" name="qsName" id="14" hidden/>
<label class="related" for="14"></label>
<span>芒果</span>
</li>
</ul>
</li>
</ul>
<!--复选:checkbox-->
<span>复选框图片切换:</span>
<input type="checkbox" class="multi" checked ='checked'>
</div>
</body>
</html>