zoukankan      html  css  js  c++  java
  • check选择样式

    样式一(H5):

    <form action="#">
      <div class="wrapper">
        <div class="box">
          <input type="checkbox" checked="checked" id="usename" /><span>√</span>
        </div>
        <lable for="usename">我是选中状态</lable>
      </div>

      <div class="wrapper">
        <div class="box">
          <input type="checkbox"  id="usepwd" /><span>√</span>
        </div>
        <label for="usepwd">我是未选中状态</label>
      </div>
    </form>

    样式一(C3):

    form {
      border: 1px solid #ccc;
      padding: 20px;
      300px;
      margin: 30px auto;
    }

    .wrapper {
      margin-bottom: 10px;
    }

    .box {
      display: inline-block;
      20px;
      height: 20px;
      margin-right: 10px;
      position: relative;
      border: 2px solid orange;
      vertical-align: middle;
    }

    .box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
    }

    .box span {
      position: absolute;
      top: -10px;
      right: 3px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      color: orange;
    }

    input[type="checkbox"] + span {
      opacity: 0;
    }

    input[type="checkbox"]:checked + span {
      opacity: 1;
    }

    样式2(H5):

    <form action="#">
      <div class="wrapper">
        <div class="box">
          <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
        </div>
        <label for="boy">男</label>
      </div>
     
      <div class="wrapper">
        <div class="box">
          <input type="radio"  id="girl" name="1"  /><span></span>
        </div>
        <label for="girl">女</label>
      </div>
    </form>

    样式2(C3):

    form {
      border: 1px solid #ccc;
      padding: 20px;
      300px;
      margin: 30px auto;
    }
    .wrapper {
      margin-bottom: 10px;
    }
    .box {
      display: inline-block;
      30px;
      height: 30px;
      margin-right: 10px;
      position: relative;
      background: orange;
      vertical-align: middle;
      border-radius: 100%;
    }
    .box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      100%;
      height:100%;
      z-index:100;/*使input按钮在span的上一层,不加点击区域会出现不灵敏*/
    }

    .box span {
      display: block;
      10px;
      height: 10px;
      border-radius: 100%;
      position: absolute;
      background: #fff;
      top: 50%;
      left:50%;
      margin: -5px 0  0 -5px;
      z-index:1;
    }

    input[type="radio"] + span {
      opacity: 0;

    }
    input[type="radio"]:checked + span {
      opacity: 1;
    }

  • 相关阅读:
    用Zend Studio12 导入在workspace中的项目
    PHP 统计中文字符串的长度
    jQuery判断checkbox是否选中的3种方法
    js,jquery获取下拉框选中的option
    HTML与XHTML的区别
    HTML头部
    HTML框架标签
    js的继承
    图片懒加载
    Http请求的gzip压缩
  • 原文地址:https://www.cnblogs.com/SunnyYYN/p/7279480.html
Copyright © 2011-2022 走看看