css3 移动细节剖析

2019-06-05 - 166 Views - 0 Goods - 1 条评论

一. 移动端自动填充出现黄色背景

  • css:  input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}
  • 利用H5新增属性 autocomplete="off",直接关闭自动填充
    eg: <input type="text" class="form-control" id="name" placeholder="输入用户名" autocomplete="off">

二. 禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check{
  display: none;
}

三.输入框改变placeholder字体颜色

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder{
color: red;
}
:-ms-input-placeholder {
  color: red;
}

四.禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {
  display: none;
}

五.h5在iOS中滑动不流畅

-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow-y: scroll;

转载请注明原文链接:首页 -> 技术交流 -> web前端 -> css3 移动细节剖析
  • 支付宝打赏
  • 微信打赏

China.BeiJing

如果说人生是自我编写的程序,那么青春就是其中意味深长的代码