去除 input 默认样式

2018-08-01  本文已影响0人  my木子

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;
}

上一篇下一篇

猜你喜欢

热点阅读