细节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时默认控件(输入框中的上下箭头)

默认:

处理:
.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 {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}




你可能感兴趣的:(前端)