zoukankan      html  css  js  c++  java
  • 纯CSS3 Material Design风格单选框和复选框

    这是一款使用纯CSS3制作的Material Design风格单选框和复选框插件。该插件只需引入指定的CSS文件,然后配合特定的HTML结构,就可以生成漂亮的Material Design风格单选框和复选框。

     该纯CSS3 Material Design风格单选框和复选框的github地址为:https://github.com/bantikyan/icheck-material

    Demo源码下载地址:https://tc5.us/file/21793581-403946075

    Demo截图:

     没有截图你看错了

    使用方法

    在页面中引入下面的文件。

    <link rel="stylesheet" href="css/icheck-material.min.css" />
    <link rel="stylesheet" href="css/icheck-material-custom.min.css" />

    复选框checkbox。

    <div class="icheck-material-teal">
    <input type="checkbox"id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label></div>

    单选框radio。

    <div class="icheck-material-teal"> <input type="radio" id="someRadioId1" name="someGroupName" />
    
    <label for="someRadioId1">Option 1</label></div><div class="icheck-material-teal">
    
    <input type="radio" id="someRadioId2" name="someGroupName" /> <label for="someRadioId2">Option 2</label></div>

    内联样式。

    <div class="icheck-material-teal icheck-inline"> 
       <input type="checkbox" id="chb1" /> 
       <label for="chb1">Label 1</label>
    </div>
    <div class="icheck-material-teal icheck-inline"> 
       <input type="checkbox" id="chb2" /> 
       <label for="chb2">Label 2</label>
    </div>
    
     

    无label。

    <div class="icheck-material-teal"> 
      <input type="checkbox" id="someCheckboxId" /> 
      <label for="someCheckboxId"></label>
    </div>
  • 相关阅读:
    Ynoi 杂题选做
    CSP-S2021 浙江 游记
    P6272 [湖北省队互测2014]没有人的算术
    P5206 [WC2019]数树
    P5405 [CTS2019]氪金手游
    LOJ6679 Unknow
    LOJ3040 「JOISC 2019 Day4」合并
    P6122 [NEERC2016]Mole Tunnels
    三维凸包
    三,四元环计数
  • 原文地址:https://www.cnblogs.com/punisher999/p/12003970.html
Copyright © 2011-2022 走看看