美文网首页
去除 input 默认样式

去除 input 默认样式

作者: my木子 | 来源:发表于2018-08-01 17:05 被阅读0次

    type="number"

    input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
    

    type="date"

    /*----------用来移除向下箭头----------*/
    input[type="date"]::-webkit-calendar-picker-indicator {
      display: none;
    }
    
    /*----------用来移除叉叉按钮----------*/
    input[type="date"]::-webkit-clear-button{
      display:none;
    }
    

    type="checkbox"

    input[type="checkbox"] {
      -webkit-appearance: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      line-height: 38px;
      position: relative;
    }
    
    input[type="checkbox"]::before {
      content: "";
      position: absolute;
      border-radius: 50%;
      top: 0;
      left: 0;
      background: #fff;
      width: 100%;
      height: 100%;
      border: 1px solid #d9d9d9
    }
    
    input[type="checkbox"]:checked::before {
      // content: "\2713";
      content: "✓";
      border-radius: 50%;
      background-color: #1989fa;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border: 1px solid #1989fa;
      color: white;
      font-size: 40px;
      font-weight: bold;
    }
    
    

    相关文章

      网友评论

          本文标题:去除 input 默认样式

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