How to remove handle (thumb) from <input type ="Range"> In Css

Question

hi guys, I want to remove the handle that comes with 'Range' in HTML, how can i hide or remove it.. pls answer

Answer 1

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-ms-thumb {
opacity:0;
}

at least with webkit (chrome) 'display:none' make the whole range element not displayed... however 'visibility:hidden' should work (not tested)...

more on styling cross-browser input type="range":

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/