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

2019-12-25 10:57:59 查看 1532 回复 0
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了