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;
  }

For what it’s worth, having forms work the same across browsers is something Apple, Google and Mozilla are working on for Interop 2022: https://wpt.fyi/interop-2022

Looks like they're mostly working on making the appearance property work the same across browsers, they aren't actually standardizing the shadow dom used to render the elements.