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

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了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值