覆盖Html5默认样式

1. input  type=number

//chrome
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      appearance: none;
      -webkit-appearance: none;
      margin: 0;
    }
    //Firefox
    .input-captcha-text[type="number"]{
      -moz-appearance:textfield;
    }

2. input type=date

input {
    -webkit-appearance: none;
    appearance: none;
  }
  input[type=date]::-webkit-inner-spin-button {
    visibility: hidden;
  }

3. ios上input点击突然变灰然后消失

input {
  color: #66645a;
  border: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 阻止ios点击时变灰
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;

  &:focus {
    border: none;
    outline: none;
    background-color: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    appearance: none;
  }

  &:visited {
    border: none;
    outline: none;
    background-color: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    appearance: none;
  }
}

4. 给type为date的input添加placeholder

<input id="baseDate" type="date" value="" placeholder="日期"/>

baseDate = document.getElementById('baseDate');
basePlaceholder = ''
if baseDate
  baseDate.onfocus = ->
    basePlaceholder = this.placeholder
    this.removeAttribute('placeholder')
  baseDate.onblur = ->
    if this.value is ''
      this.setAttribute('placeholder', basePlaceholder)

input {
  font-size: 14px;
  height: 20px;
  width: 100%;
  line-height: 20px;
  padding: 11.5px 0 11.5px 10px;
  color: #66645a;
  border: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 阻止ios点击时变灰
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;

  &:focus {
    border: none;
    outline: none;
    background-color: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    appearance: none;
  }

  &:visited {
    border: none;
    outline: none;
    background-color: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    appearance: none;
  }
}

//添加date placeholder
input[type="date"]:before {
  content: attr(placeholder);
  color: #999;
}

input[type=date]::-webkit-inner-spin-button {
  visibility: hidden;
  background-color: #fff;
}