I've done this before. The problem is a lot of elements will change to a different (standard?) appearance when you add styles like that, so you'd need to recreate the original look if you wanted to just change the color. Also, each browser has different psuedoelements so you have to support firefox and webkit separately, which is made worse by the fact that webkit doesn't support targeting multiple elements with your psuedoelement selector, ex. you can't do this:

  input[type="range"]::-moz-range-thumb,
  input[type="range"]::-webkit-slider-thumb {
    background-color: red;
  }

It'll work in Firefox, but Chrome (and probably Safari) will ignore it. Instead you need to do this:

  input[type="range"]::-moz-range-thumb {
    background-color: red;
  }
  input[type="range"]::-webkit-slider-thumb {
    background-color: red;
  }