自定义 radio + checkout 样式

最新推荐文章于 2022-09-29 17:52:04 发布
原创最新推荐文章于 2022-09-29 17:52:04 发布 · 1.6k 阅读
0 ·
CC 4.0 BY-SA版权
Css 专栏收录该内容
17 篇文章
订阅专栏
<!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>