zoukankan      html  css  js  c++  java
  • checkbox和radio元素的样式设置(简易版)

    html代码

    //html
    <div>
        <p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">约吗?</p>
        <label class="demo--label">
            <input class="demo--radio" type="radio" name="demo-radio">
            <span class="demo--radioInput"></span>约
        </label>
        <label class="demo--label">
            <input class="demo--radio" type="radio" name="demo-radio">
            <span class="demo--radioInput"></span>不约
        </label>
    </div>
    <div>
        <p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">我帅不帅?</p>
        <label class="demo--label"><input class="demo--radio" type="checkbox" name="demo-checkbox1">
            <span class="demo--checkbox demo--radioInput"></span>帅
        </label>
        <label class="demo--label">
            <input class="demo--radio" type="checkbox" name="demo-checkbox2">
            <span class="demo--checkbox demo--radioInput"></span>很帅
        </label>
        <label class="demo--label">
            <input class="demo--radio" type="checkbox" name="demo-checkbox3">
            <span class="demo--checkbox demo--radioInput"></span>超级帅
        </label>
    </div>
    

     css代码(网页)

    //css(网页)
    .demo--label{margin:20px 20px 0 0;display:inline-block}
    .demo--radio{display:none}
    .demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;16px;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;line-height:1}
    .demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;12px;height:12px;margin:2px;}
    .demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
    

     css代码(手机)

    //css(手机)
    .demo--label{display:inline-block;font-size: pRem(22)}
    .demo--radio{display:none}
    .demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;pRem(20);height:pRem(20);margin-right:pRem(4);margin-top:-2px;vertical-align:middle;line-height:1;position: relative;}
    .demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;pRem(16);height:pRem(16);position: absolute;top: pRem(2);left: pRem(2);}
    .demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
    

      

  • 相关阅读:
    SharePoint Framework (SPFx) 开发入门教程
    SharePoint 2013 Designer 入门教程
    SharePoint 2013 开发教程
    SharePoint 2013 入门教程
    SharePoint Online 部署SPFx Web部件
    SharePoint Online SPFx Web部件绑定数据
    SharePoint Online 创建SPFx客户端Web部件
    SharePoint Online 配置框架(SPFx)开发环境
    SharePoint Online 创建应用程序目录
    SharePoint Online 启用 IRM
  • 原文地址:https://www.cnblogs.com/Code-Inconnu/p/7782775.html
Copyright © 2011-2022 走看看