zoukankan      html  css  js  c++  java
  • 用纯CSS 自定义radio checkbox 样式

    可以用<label></label>标签的for 属性 + :checked 做,纯CSS

    <!-- HTML -->
    <div class="radio-beauty-container">
        <label>
            <span class="radio-name">radio1</span>
            <input type="radio" name="radioName" id="radioName1" hidden/>
            <label for="radioName1" class="radio-beauty"></label>
        </label>
        <label>
            <span class="radio-name">radio2</span>
            <input type="radio" name="radioName" id="radioName2" hidden/>
            <label for="radioName2" class="radio-beauty"></label>
        </label>
        <label>
            <span class="radio-name">radio3</span>
            <input type="radio" name="radioName" id="radioName3" hidden/>
            <label for="radioName3" class="radio-beauty"></label>
        </label>
    </div>

    CSS

    /* CSS */
    .radio-beauty-container {
      font-size: 0;
    }
    .radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
      padding: 2px;
      background-color: green;
      background-clip: content-box;
    }
    .radio-beauty-container .radio-name {
      vertical-align: middle;
      font-size: 16px;
    }
    .radio-beauty-container .radio-beauty {
      width: 18px;
      height: 18px;
      box-sizing: border-box;
      display: inline-block;
      border: 1px solid green;
      vertical-align: middle;
      margin: 0 15px 0 3px;
      border-radius: 50%;
    }
    .radio-beauty-container .radio-beauty:hover {
      box-shadow: 0 0 7px green;
    }
  • 相关阅读:
    总结Spring Set注入方式及对property标签的理解
    spring基于Annotation装配Bean时在bean.xml中添加<context:component-scan>标签报错
    java web(struts2)+python+mysql 的简单实践
    罗辑思维--怎样成为一个高手
    教练助手
    小组作业(第五组)
    个人开发总结
    第五组小组作业
    个人作业
    小组总结
  • 原文地址:https://www.cnblogs.com/wangshengli520/p/13570220.html
Copyright © 2011-2022 走看看