CSS移动端特有样式 / input相关

body{
    font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

    -webkit-font-smoothing:antialiased; <!--使字体变清晰-->
    -webkit-user-select:none;<!--不可选择文字-->

    -webkit-overflow-scrolling:touch;
    <!--区域性 overflow: scroll | auto 滚动时使用原生效果（ios8+，Android4.0+）-->
}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

//table布局法

.box{ 
    text-align:center; 
    display:table-cell; 
    vertical-align:middle; 
}

//老版本flex布局法
.box{ 
    display:-webkit-box; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
    text-align:center; 
}

//ps:
//使用 flex 的时候一定要记得加前缀,不然肯定会有兼容性问题
//（目前使用方式都有三种写法：1，旧的2，过度的3，新的)
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;

 }

-webkit-tap-highlight-color : none;

//去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) ,此属性加在body或html都可以。
body,html,a, input{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

    -webkit-touch-callout： none;

//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 ,此属性加在button按钮上。 
    -webkit-appearance: none;

::-webkit-scrollbar {/*隐藏滚轮*/
    display: none;
}

.classname::selection{
    background: black;color:red;
}

//改用  position:absolute; 定位
//外面用 如下样式包裹
.frame-wrapper {
  transform: translate3d(0px, 0px, 0px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform ease-in-out 0.38s, visibility 0.38s, -webkit-transform ease-in-out 0.38s;
}

//导航下面的滚动内容区域
.content-wrapper {
  box-sizing: border-box;
  height: 100%;
  overflow-x:hidden;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
}

::-webkit-input-placeholder {
    color: #ccc;
}

//chrome下：
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

//Firefox下：
input[type="number"]{-moz-appearance:textfield;}

input:-ms-clear{display:none;}

<input type="text" autocapitalize="off" autocorrect="off" />

input::-webkit-input-speech-button {display: none}

input类型为date情况下不支持placeholder：

这其实是浏览器自己的处理。因为浏览器会针对此类型 input 增加 datepicker 模块。

对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式，iOS 上会有 datepicker 不会显示 placeholder 文字，但是为了统一表单外观，往往需要显示。Android 部分机型没有 datepicker 也不会显示 placeholder 文字。

桌面端（Mac）：

Safari 不支持 datepicker，placeholder 正常显示。

Firefox 不支持 datepicker，placeholder 正常显示。

Chrome 支持 datepicker，显示 年、月、日 格式，忽略 placeholder。

移动端：

iPhone5 iOS7 有 datepicker 功能，但是不显示 placeholder。

Andorid 4.0.4 无 datepicker 功能，不显示 placeholder

解决办法：

<input placeholder="Date" class="textbox-n" type="text" οnfοcus="(this.type='date')"  id="date"> 
//因为text是支持placeholder的。因此当用户focus的时候自动把type类型改变为date，这样既有placeholder也有datepicker了