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