I am trying to add a border to a <select> element, but I want it to overlap the default button border so that it looks more visually appealing. I am looking for a CSS-only solution that can be applied to all <select> elements on my website. If necessary, I can leave the <select> elements unstyled and have them look slightly different from other form elements. Here are the solutions I have attempted...
Solution #1
My initial attempt was to use the CSS property outline. While this option has minimal side effects and goes on top of everything, it requires the use of outline-offset to overlap the content inside the element. Unfortunately, this property is not supported by older versions of Internet Explorer.
Here is what it looked like: http://jsfiddle.net/9w9et7fp/
Attempt #2
My next approach involved using box-shadow, which allows you to add a shadow to your element. By setting the shadow to inset, I was able to achieve the desired effect. However, this method is not supported in IE8.
Here is what it looked like: http://jsfiddle.net/9w9et7fp/1/
Any other ideas?
After exploring various options, I am open to suggestions for achieving the desired border overlap effect on <select> elements. Even if it involves an IE-only filter, I am willing to consider it as a solution.