移动端CSS小技巧代码,Css代码库,德仔网

代码语言
代码分类
【Css】移动端CSS小技巧
作者:松鹏 / 发布于2017/3/28/ 851
移动端，数字去除电话格式，头部加  <meta name="format-detection" content="telephone=no" />



移动端，某区域设置有滚动条时，解决滚动不顺畅问题，实现弹性滚动，加样式 ：overflow-y:auto; -webkit-overflow-scrolling:touch;


移动端，给元素加click事件没反应时，加样式：cursor:pointer;试试看



移动端，当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景闪一下（苹果设备）或出现边框（安卓机）。要重置这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。加样式：-webkit-tap-highlight-color: rgba(0,0,0,0);



焦点在input时，placeholder没有隐藏
input:focus::-webkit-input-placeholder{opacity: 0;}


input输入框调出数字输入键盘
1、<input type="number" />
2、<input type="number" pattern="[0-9]*" />
3、<input type="tel" />
需要注意的是，单独使用type="number" 时候，iOS上出现并不是九宫格的数字键盘，如果需要九宫格的数字键盘，可选择使用 2、3 的方法。 1、2、3 在 Android 上均可以唤起九宫格的数字键盘


搜索时，键盘的回车按钮文字设定为“搜索”
解决： input 使用 type="search"，放在 form 表单内。两者结合就能使输入法中的回车按钮文字变为“搜索”
<form action="">
    <input type="search" />
</form>


iframe 在 iOS 上没有滚动条，直接撑出去
解决：给 iframe 外嵌套一个 div， 为这个 div 设置固定高度与 overflow
<div>
<iframe src=""></iframe>
</div>
div{height: 100px;overflow: auto;-webkit-overflow-scrolling: touch;}


当模块使用系统的横向滚动时，不想显示出系统的滚动条样式
Android：
::-webkit-scrollbar{
opacity: 0;
}
iOS 要隐藏横向滚动条，会稍微复杂一些
<div class="wrap">
<div class="box"></div>
</div>
.wrap{
height: 100px;
overflow: hidden;
}
.box{
width: 100%;
height: -webkit-calc(100% + 5px);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
原理：.box 元素的横向滚动条通过其外层元素 .wrap 的 overflow:hide 来隐藏。 （5px 是 iOS 上滚动条元素的高度）
试试其它关键字
同语言下
可能有用的
松鹏贡献的其它代码(11)