Change the browser scroll bar style and change the select style

Not original, I don't know where the original source is. Just write it down for your own convenience. If the original author sees it, please contact to delete it or attach a link to the original work.

Change the scroll bar

/* Define the height and width of the scroll bar and the height and width of the background corresponding to the size of the horizontal and vertical scroll bars */
::-webkit-scrollbar
{
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Define the shadow + rounded corners in the scrollbar track */
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 8px rgb(1, 64, 118);
  border-radius: 2px;
  background-color: rgba(245, 245, 245, 0.2);
}

/* Define slider inner shadow + rounded corners */
::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 8px #014076;
  background-color: #555;
}

 

custom select style

select {
   /* The borders in Chrome and Firefox are different, so rewrite it */ 
  border : solid 1px #000 ;

  /* very critical: clear the default select box style */ 
  appearance : none ; 
  -moz-appearance : none ; 
  -webkit-appearance : none ;

  /* Display a small arrow image in the rightmost middle of the selection box */ 
  background : url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent ;


  /* Leave a little space for the drop-down arrow to avoid being covered by text */ 
  padding-right : 14px ;
}


/* Clear ie's default select box style clear, hide the drop-down arrow */ 
select::-ms-expand { display : none ; }