滚动条样式、input样式等常见控件默认样式调整

1、滚动条样式

浏览器自带的滚动条样式有些丑，尤其是火狐浏览器，巨丑，覆盖方法如下：

::-webkit-scrollbar-button, ::-webkit-scrollbar-corner {

display: none

}

::-webkit-scrollbar {

width: 4px;

height: 4px;

background-color: rgba(0,0,0,0.6);

}

::-webkit-scrollbar-thumb {

border: 4px solid transparent;

background-clip: padding-box;

border-radius: 12px;

background-color: rgba(0,0,0,0.6);


}

2、textarea横向拉伸

<style>
 textarea {
      resize: vertical!important;
  }
<style>
<textarea id="textarea" placeholder="禁止横向拉伸"></textarea>

3、input 控件，当type为number，出现上下箭头，样式调整

// 谷歌浏览器
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  // 火狐浏览器
  input[type="number"] {
    -moz-appearance: textfield;
  }

4、input、textarea等控件，placeholder样式调整

input::-webkit-input-placeholder{
    color: #000;
    font-size:20px;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color: #000;
    font-size:20px;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color: #000;
    font-size:20px;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color: #000;
    font-size:20px;
}