美文网首页
自定义复选框样式之 input[type="checkbox"]

自定义复选框样式之 input[type="checkbox"]

作者: 硅谷干货 | 来源:发表于2022-03-31 20:14 被阅读0次

    前言

    有的时候在编辑页面的时候会出现需要修改原生复选框样式的需求,那么,这里有一个范本,可以参照修改

    预览

    image.png

    定义

    /* 复选框组件 */
    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      line-height: 16px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      position: relative;
      box-sizing: content-box;
    }
    
    input[type="checkbox"]::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: #fff;
      width: 100%;
      height: 100%;
      border: 2px solid rgba(0,0,0,0.40);
      border-radius: 2px;
    }
    
    input[type="checkbox"]:checked::before {
      content: "✔";
      background-color: #0A59F7;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border: 2px solid #0A59F7;
      border-radius: 2px;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
    }
    

    使用

    <input class="input-check" type="checkbox" :checked="checked" />
    

    content 样式有很多,这里可以参考我的另外一篇:css3中content特殊字符列表 - 简书 (jianshu.com) ,根据需要,同学们随心选!

    点赞加关注,永远不迷路

    相关文章

      网友评论

          本文标题:自定义复选框样式之 input[type="checkbox"]

          本文链接:https://www.haomeiwen.com/subject/ikgnjrtx.html