css技巧总结

本文旨在记录css中比较特殊的属性的用法，先按项目的时间顺记录，以后再整理。

a,input,button,select,textarea{
  outline:none; 
  -webkit-tap-highlight-color: rgba(0,0,0,0);  /* 去掉点击元素时产生的背景或边框和高亮 */    
} 

2.

input::-ms-clear {/* 去掉ie自带的input删除功能 */
  display:none;
}

3.

*.disabled,
*[disabled] {/*添加disabled属性使元素不可点击*/
  pointer-events: none;
  cursor: not-allowed;
}

4.

select {/* 去除下拉框样式 */
   border: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
}
select::-ms-expand {/* ie浏览器去除下拉框样式 */
 display: none; 
} 

 5.去除chrome下input输入框等黄色背景

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
     -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

6.修改placeholder颜色

/*修改placeholder颜色*/
input::-webkit-input-placeholder {
　　color: #f5f5f5 !important; /* WebKit browsers */
}
input:-moz-placeholder {
    color: #f5f5f5 !important; /* Mozilla Firefox 4 to 18 */
}
input::-moz-placeholder {
　　color: #f5f5f5 !important; /* Mozilla Firefox 19+ */
}
input:-ms-input-placeholder {
　　color: #f5f5f5 !important; /*Internet Explorer 10+ */
}

 7.设置滚动条样式，主要用在移动端

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track,::-webkit-scrollbar-corner {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #525558;
}

 8.让页面在Native端滚动时模拟原生的弹性滚动效果

.target{
    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }