html の input type="range" を css でカッコつけてみた

html の input 要素。

右に左にぐいーんってできます。







これを css でちょっとカッコつけみました。。

input[type="range"] {
-webkit-appearance:none;
width: 100%; background: #eee;
box-shadow: 0 0 10px #666;
border-radius: 50px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #333;
width: 50px;
height: 50px;
border-radius: 50%;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #999;
}
input[type="range"]::-webkit-slider-thumb:active {
background: #fefefe;
}





input#cus { -webkit-appearance:none; width: 100%; background: #eee; box-shadow: 0 0 10px #666; border-radius: 50px; } input#cus::-webkit-slider-thumb { -webkit-appearance: none; background: #333; width: 50px; height: 50px; border-radius: 50%; } input#cus::-webkit-slider-thumb:hover { background: #999; } input#cus::-webkit-slider-thumb:active { background: #fefefe; }