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

body字体样式：

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;

 }

去除ios 按钮按下的默认高亮效果:

-webkit-tap-highlight-color : none;

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

ios 触摸并按住触摸目标时候，禁止或显示系统默认菜单:

    -webkit-touch-callout： none;

ios 下移除原生样式:

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

移动端隐藏scroll滚动条：

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

CSS3 ::selection修改选中文字的颜色:

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

ios上fixed失效解决如下：

//改用  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;
}

---

input相关

input placeholder样式:

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

移除HTML5 input在type=”number”时的上下小箭头:

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

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

消除ie10里面的那个叉号:

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

自动大写与自动修正:

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

Andriod 上去掉语音输入按钮:

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" onfocus="(this.type='date')"  id="date"> 
//因为text是支持placeholder的。因此当用户focus的时候自动把type类型改变为date，这样既有placeholder也有datepicker了