Not an easy goal, especially if you’re hoping for anything that will work cross browser.
My take after reading these two pages is the path of least resistance is to use JavaScript. - but that’s an awful big “least”
Some elements simply can’t be styled using CSS. These include all advanced user interface widgets such as range, color, or date controls as well as all the dropdown widgets, including
<select>,<option>,<optgroup>and<datalist>elements. The file picker widget is also known not to be stylable at all. The new<progress>and<meter>elements also fall in this category.
The main issue with all these widgets comes from the fact that they have a very complex structure and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets you have to rely on JavaScript to build a DOM tree you’ll be able to style. We’ll learn how to do this in the article How to build custom form widgets.
If you want to gain full control over form widgets, you have no choice but to rely on JavaScript. In the article How to build custom form widgets we will see how to do it on our own, but there are some very useful libraries out there that can help you: