html做原生应用底部导航样式,html原生样式处理

输入框：type=“number” 去除上下箭头

/*输入框：type=“number” 去除上下箭头*/

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

-webkit-appearance: none !important;

margin: 0;

}

input[type="number"] {

-moz-appearance:textfield;

}

select将默认的select选择框样式清除

select {

/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/

/*border: solid 1px #000;*/

/*很关键：将默认的select选择框样式清除*/

appearance:none;

-moz-appearance:none;

-webkit-appearance:none;

/*留出一点位置，避免被文字覆盖*/

padding-right: 14px;

}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/

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

input {

-webkit-appearance: none;

}

placeholder样式

/*火狐:-moz-placeholder*/

/*webkit内核浏览器::-webkit-input-placeholder*/

input::-webkit-input-placeholder { /* WebKit browsers*/

color: #999999;

}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/

color: #999999;

}

input::-moz-placeholder { /* Mozilla Firefox 19+*/

color: #999999;

}

input:-ms-input-placeholder { /* Internet Explorer 10+*/

color: #999999;

}

光标改变颜色

input:focus {

caret-color: #1AA4FD;

}

滤镜(高斯模糊)

.lvjing {

-webkit-filter: blur(3px); /* Chrome, Opera */

-moz-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=false); /* IE6~IE9 */

}

* {

filter: grayscale(100%); /*灰度*/

filter: blur(5px); /*模糊*/

filter:brightness(200%); /*高亮*/

filter:saturate(8); /*饱和*/

filter:sepia(100%); /*怀旧*/

}

用伪类来显示打印时，a标签的链接

@meida print {

a[href]:after {

content: "(" attr(href) ")";

}

}

pointer-events

用pointer-events来禁用事件

阻止任何点击动作的执行

使链接显示为默认光标( cursor: default; )

阻止触发hover和active状态

阻止JavaScript点击事件的触发

/*使用该类，任何点击事件将无效*/

.disable {

pointer-events: none;

}

阻止微信下拉显示内核版本号

document.querySelector('body').addEventListener('touchmove', function(e) {

e.preventDefault();

})