Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Merge rules with vendor-specific pseudo-element selectors
<!doctype html>
<style>
#original input[type=range] {
-webkit-appearance: none !important;
}
#original input[type=range]::-webkit-slider-runnable-track {
height: 2px;
width: 100px;
background: red;
border: none;
}
#original input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none !important;
border: none;
width: 10px;
height: 10px;
background: red;
}
#original input[type=range]::-moz-range-thumb {
border: none;
width: 10px;
height: 10px;
background: red;
}
#merged input[type=range] {
-webkit-appearance: none!important
}
#merged input[type=range]::-webkit-slider-runnable-track {
height: 2px;
width: 100px;
background: red;
border: none
}
#merged input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none!important
}
#merged input[type=range]::-moz-range-thumb,
#merged input[type=range]::-webkit-slider-thumb {
border: none;
width: 10px;
height: 10px;
background: red
}
</style>
<p id="original">Original: <input type="range"></p>
<p id="merged">Merged: <input type="range"></p>
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.