细节css消除移动端默认样式

1.避免长按网页出现选中样式:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

2.避免点击div出现阴影

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

3.避免ios滑动滚动条卡顿

-webkit-overflow-scrolling : touch

4.去掉input type=number时默认控件(输入框中的上下箭头)

默认:<input type="number" /><br><br>
处理:<input type="number" class="deal" />
.deal::-webkit-textfield-decoration-container {
   background-color: #f0f3f9;
}    //添加背景色 
下边两行是去掉input 输入框右边的上下箭头按钮
.deal::-webkit-inner-spin-button {
   -webkit-appearance: none;
}
.deal::-webkit-outer-spin-button {
   -webkit-appearance: none;
}

5.显示部分边框

<div>请看这个div的“上边框”是只有一半的</div>
div {
    position:relative; width:300px; height:50px; background-color:#bbb; padding:4px
}
div:before {
    content:""; 
    position:absolute;
    left:0; top:-2px; 
    width:50%; height:2px; 
    background-color:red
}

版权声明:
作者:phpcn
链接:https://blog.i-book.ml/9/
来源:小小云博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭