Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AFAIK, this is supposed to be impossible behvavior. Yet, all browsers seem to be affected.
<html>
<head>
<!-- Any idea whatsoever why input.works works and input.wtf is completely
unstyled in firefox & chrome? Also, input.half-wtf works in Firefox, even
when swapping around the lines. -->
<style>
input {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
input.wtf::-ms-thumb,
input.wtf::-moz-range-thumb,
input.wtf::-webkit-slider-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.half-wtf::-webkit-slider-thumb,
input.half-wtf::-moz-range-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.works::-ms-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.works::-webkit-slider-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.works::-moz-range-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
</style>
</head>
<body>
<input class="wtf" type="range" />
<br />
<input class="half-wtf" type="range" />
<br />
<input class="works" type="range" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.