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();
})