[CSS] how to change Button Style
[Button]
https://www.w3schools.com/css/css3_buttons.asp
[Select]
https://codepen.io/marceltschopp/pen/PNyqKp
[Input Range]
http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
https://www.w3schools.com/howto/howto_js_rangeslider.asp
http://www.cssportal.com/style-input-range/
https://css-tricks.com/custom-interactive-range-inputs/
input[type="range"] {
margin: auto;
-webkit-appearance: none;
position: relative;
overflow: hidden;
height: 40px;
width: 200px;
cursor: pointer;
border-radius: 0; /* iOS */
}
input[type=range]::-webkit-slider-runnable-track {
background: #ddd;
}
/*
* 1. Set to 0 height and width, and remove border for a slider without a thumb
*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; /* 1 */
height: 40px; /* 1 */
background: #fff;
box-shadow: -100vw 0 0 100vw dodgerblue;
border: 2px solid #999; /* 1 */
}
input[type=range]::-ms-fill-lower {
background: dodgerblue;
}
input[type=range]::-ms-thumb {
background: #fff;
border: 2px solid #999;
height: 40px;
width: 20px;
box-sizing: border-box;
}
input[type=range]::-ms-ticks-after {
display: none;
}
input[type=range]::-ms-ticks-before {
display: none;
}
input[type=range]::-ms-track {
background: #ddd;
color: transparent;
height: 40px;
border: none;
}
input[type=range]::-ms-tooltip {
display: none;
}