模仿单选框，复选框，实现美化版的单选框和复选框 radio 、 checkbox 日期选择

 

源码下载      

@charset "UTF-8";
#evt_content * {
  vertical-align: baseline !important; }

/*价格符号不对齐*/
#evt_content {
  background: #ffeac1;
  background-size: 100%; }
  #evt_content img {
    width: 100%; }
  #evt_content .sec {
    position: relative; }
  #evt_content .sec-register {
    padding-bottom: 2.26667rem;
    background: url("../images/register.png") repeat;
    background-size: 100%;
    z-index: 1;
    overflow: hidden;
    text-align: center; }
    #evt_content .sec-register .register-content {
      width: 8.92rem;
      height: 15.44rem;
      background: url("../images/register-content.png");
      background-size: 100%;
      margin: 2.26667rem auto 0;
      overflow: hidden; }
      #evt_content .sec-register .register-content h2 {
        font-size: 0.48rem;
        color: #6c4700;
        margin: 0.93333rem auto 0.66667rem; }
      #evt_content .sec-register .register-content .register {
        width: 8.26667rem;
        margin: 0 auto;
        color: #a4a4a4; }
        #evt_content .sec-register .register-content .register ul li {
          position: relative;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          background: #fff5df;
          line-height: 1.12rem;
          margin-bottom: 0.30667rem;
          font-size: 0.34667rem; }
          #evt_content .sec-register .register-content .register ul li b {
            display: block;
            width: 1.6rem;
            height: 1.12rem;
            text-align: left;
            background: url("../images/star.png") 0.26667rem center no-repeat;
            background-size: 12%;
            padding-left: 0.53333rem;
            font-weight: normal; }
            #evt_content .sec-register .register-content .register ul li b.yzm {
              width: 2.66667rem;
              background-size: 7%; }
            #evt_content .sec-register .register-content .register ul li b.tel {
              width: 2.13333rem;
              background-size: 9%; }
            #evt_content .sec-register .register-content .register ul li b.noStar {
              background: none;
              padding-left: 0.26667rem; }
          #evt_content .sec-register .register-content .register ul li input {
            flex: 1;
            background: none;
            font-size: 0.34667rem;
            border: none; }
          #evt_content .sec-register .register-content .register ul li input.radio {
            flex: 0;
            opacity: 0;
            display: inline-block;
            width: 0;
            height: 1.10667rem; }
          #evt_content .sec-register .register-content .register ul li span.sex-span {
            display: block;
            width: 0.4rem;
            text-align: right;
            margin-right: 0.13333rem; }
          #evt_content .sec-register .register-content .register ul li .kind-sex {
            vertical-align: middle;
            width: 0.4rem;
            height: 1.12rem;
            margin-right: 0.8rem;
            margin-left: 0.13333rem;
            cursor: pointer;
            background: url("../images/icon.png") center center no-repeat;
            background-size: 100%;
            border: none; }
          #evt_content .sec-register .register-content .register ul li .kind-sex.hot {
            background: url("../images/icon-on.png") center center no-repeat;
            background-size: 100%; }
          #evt_content .sec-register .register-content .register ul li.flavorWrap {
            padding: 0.26667rem 0; }
            #evt_content .sec-register .register-content .register ul li.flavorWrap .noStar {
              line-height: 0.8rem; }
            #evt_content .sec-register .register-content .register ul li.flavorWrap span.label {
              display: block;
              width: 1.04rem;
              line-height: 0.8rem;
              text-align: right;
              margin-right: 0.13333rem; }
            #evt_content .sec-register .register-content .register ul li.flavorWrap .kind {
              vertical-align: middle;
              width: 0.4rem;
              height: 0.8rem;
              margin-right: 0;
              cursor: pointer;
              background: url("../images/icon.png") center center no-repeat;
              border: none;
              background-size: 100%; }
            #evt_content .sec-register .register-content .register ul li.flavorWrap .kind.hot {
              background: url("../images/icon-on.png") center center no-repeat;
              background-size: 100%; }
            #evt_content .sec-register .register-content .register ul li.flavorWrap .check-box {
              display: flex;
              flex: 1;
              flex-wrap: wrap;
              align-content: flex-start; }
          #evt_content .sec-register .register-content .register ul li .tyzm {
            position: absolute;
            width: 2.66667rem;
            height: 0.88rem;
            top: 0.12rem;
            right: 0.29333rem; }
            #evt_content .sec-register .register-content .register ul li .tyzm img {
              height: 100%; }
          #evt_content .sec-register .register-content .register ul li .send {
            position: absolute;
            width: 2.66667rem;
            height: 1.12rem;
            text-align: right;
            top: 0;
            right: 0.29333rem;
            color: #d39c3a; }
      #evt_content .sec-register .register-content .register-btn {
        width: 2.32rem;
        margin: 0.49333rem auto; }
      #evt_content .sec-register .register-content p {
        font-size: 0.25333rem;
        color: #6c4700; }

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css">
</head>
<body>
<div id="evt_container">
    <div class="wrap">
        
        <div id="evt_content">
            <div class="sec sec-register">
                <div class="register-content">
                    <h2>新用户注册</h2>
                    <div class="register">
                        <ul>
                            <li>
                                <b class="tel">手机号：</b><input type="tel" maxlength="11" class="input">
                            </li>
                            <li>
                                <b class="yzm">图片验证码：</b><input type="tel" maxlength="6" class="input">
                                <div class="tyzm"><img src="https://h5.mcake.com/api/7ba4aed89d17966a?type=login&t=xpHDjBKzb4y8EfxfDEBGtKeDmaKejpTH&r=1610607305317" alt=""></div>
                            </li>
                            <li>
                                <b class="yzm">手机验证码：</b><input type="tel" maxlength="11" class="input">
                                <div class="send" onclick="settime(this)">获取验证码</div>
                            </li>
                            <li>
                                <b class="noStar">生日：</b> <input class="js-date-picker input" type="text" placeholder=""  readonly="readonly">
                            </li>
                            <li class="sexWrap">
                                <b class="noStar">性别：</b>
                                <span class="sex-span">男</span>
                                <button value="2" name="sex" class="kind-sex hot"></button>
                                <span class="sex-span">女</span>
                                <button value="2" name="sex" class="kind-sex"></button>
                            </li>
                            <li class="flavorWrap">
                                <b class="noStar">偏爱：</b>
                                <div class="check-box">

                                    <span class="label" >拿破仑</span>
                                    <button name="flavor" class="kind hot"></button>
                                    <span class="label" >鲜奶</span>
                                    <button name="flavor" class="kind hot"></button>
                                    <span class="label" >慕斯</span>
                                    <button name="flavor" class="kind hot"></button>

                                    <span class="label" >芝士</span>
                                    <button name="flavor" class="kind hot"></button>
                                    <span class="label" >巧克力</span>
                                    <button name="flavor" class="kind"></button>
                                    <span class="label" >咖啡</span>
                                    <button name="flavor" class="kind hot"></button>

                                    <span class="label" >坚果</span>
                                    <button name="flavor" class="kind"></button>
                                    <span class="label" >水果</span>
                                    <button name="flavor" class="kind hot"></button>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="register-btn"><img src="images/register-btn.png" alt=""></div>
                    <p>完善信息，在生日和偏爱口味出新品时，会有大额优惠券发送至账户哦~</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://act.mcake.com/fangli/2019/wap/commonjs/flexible.js"></script>
    <script src="https://act.mcake.com/fangli/2019/wap/commonjs/jquery.min.js"></script>
    <script src="datePicker.js"></script>
    <script type="text/javascript">
        $(".sexWrap .kind-sex").click(function () {
            $(this).addClass("hot").siblings(".kind-sex").removeClass("hot");
        });

        $(".flavorWrap .kind").click(function () {
            if($(this).hasClass("hot")){
                $(this).removeClass("hot");
            }else {
                $(this).addClass("hot");
            }
        });



    var mydate = new Date();
        var maxDate = mydate.getFullYear() + '-' + (mydate.getMonth()+1) + '-' + mydate.getDate()
        var calendar = new datePicker();
        calendar.init({
            trigger: ".js-date-picker" /*按钮选择器，用于触发弹出插件*/,
            type: "date" /*模式：date日期；datetime日期时间；time时间；ym年月；year:年*/,
            minDate: "1900-1-1" /*最小日期*/,
            maxDate: maxDate /*最大日期*/,
            onSubmit: function() {
                /*确认时触发事件*/
               // let theSelectData = calendar.value
            },
            onClose: function() {
                /*取消时触发事件*/
            }
        });
    </script>
</body>
</html>