Skip to content

Instantly share code, notes, and snippets.

@martijnvermaat

martijnvermaat/index.html

Created February 29, 2016 16:12
Show Gist options
  • Save martijnvermaat/81eb2945b36657aa9528 to your computer and use it in GitHub Desktop.
Save martijnvermaat/81eb2945b36657aa9528 to your computer and use it in GitHub Desktop.
Download ZIP
Merge rules with vendor-specific pseudo-element selectors
Raw
index.html
<!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