zoukankan      html  css  js  c++  java
  • 改变input复选框样式

    在网页设计中由于无法设置input框的样式很多时候会使用图片代替,今天在《css揭秘》一书中看到关于input样式框的修改,感觉很有启发,所以提供给广大开发者,希望有所帮助。

    具体思路使用一个label标签来将input复选框给遮盖住,同时使用input的checked属性实现样式变换。

    input原本样式

    修改后的样式

    css代码

    body {
      background:#a8bfcf;
    }
    .cricle {
      margin-top: 20px;
    }
    input+.las:before {
      display: inline-block;
      margin-right: 5px;
      content: "a0"; /*不换行空格*/
       1em;
      height: 1em;
      background:linear-gradient(#2467b5,#5e90d7);
      border-radius: .25em;
      border:.125em solid white;
      text-indent: .08em;
      line-height: 1em;
      box-shadow: .08em .08em .08em rgba(0,0,0,.4),.08em .1em .08em rgba(0,0,0,.4) inset;
      font-size: 24px;
      vertical-align: middle;
      outline-offset: -10px;
    }
    input:checked+.las:before{
      content:"2713";
      background:linear-gradient(#2467b5,#5e90d7);
      color: white;
      font-weight: bold;
      box-shadow: .08em .08em .08em rgba(0,0,0,.4),.08em .1em .08em rgba(0,0,0,.4) inset;
    }
    input+.lasC:before{
      border-radius: 50%;
    }
    input:checked+.lasC:before{
      content: "·";
      text-indent: 0;
      text-shadow: 2px 0 2px white,0 2px 2px white, 0 -2px 2px white, -2px 0 2px white; /*由于点太小扩大阴影使其变大*/
    }
    input {
      position: absolute;
      clip: rect(0,0,0,0);
    }

    html代码

    <div>
      <input type="checkbox" id="awesome4" />
      <label class="las" for="awesome4">Awesome!</label>
      <input type="checkbox" id="awesome5" />
      <label class="las" for="awesome5">Awesome2!</label>
      <input type="checkbox" id="awesome6" />
      <label class="las" for="awesome6">Awesome3!</label>
    </div>
    <div class="cricle">
      <input type="checkbox" id="awesome" />
      <label class="las lasC" for="awesome">Awesome!</label>
      <input type="checkbox" id="awesome2" />
      <label class="las lasC" for="awesome2">Awesome2!</label>
      <input type="checkbox" id="awesome3" />
      <label class="las lasC" for="awesome3">Awesome3!</label>
    </div>

  • 相关阅读:
    今天查看了java文档中的sort方法
    记录下git简单使用(以码云为例)
    今天是leetcode300
    今天了解了一下摩尔投票法
    # 今天学习了一下java8的lambda表达式
    make命令的-j -f参数说明
    shell中单引号和双引号区别
    判断字符串相似度
    shell计算时间差
    hive cli转hive beeline的几个例子
  • 原文地址:https://www.cnblogs.com/shengliang74/p/6158639.html
Copyright © 2011-2022 走看看