格式化<选择>边框</select>

Question

我需要为<select>元素添加边框，但我想重叠按钮右侧通常提供的边框（因此看起来并不完全卑鄙： _{{ {0}} ）。它应该是一个仅限CSS的解决方案，因为它将用于我网站中的所有<select>元素。如果绝对必要的话，我可以将<select>元素保持原样，它们与表格中的其他内容略有不同。无论如何，我试过的解决方案......}

尝试＃1

我的第一个解决方案是使用outline。这具有最小的副作用（因为它不会改变尺寸）并且在所有事物之上（这是我想要的）。 IE8支持它，但是为了使它与元素的内容重叠，我需要使用outline-offset。不幸的是，这是CSS3规范中的新功能，因此IE根本不支持它。

以下是：http://jsfiddle.net/9w9et7fp/

尝试＃2

我的下一个解决方案是使用box-shadow。这允许您为元素设置阴影。默认情况下，它位于元素的外部。但是你可以指定使它inset，这正是我正在寻找的。虽然这对IE更友好，但IE8不支持它。

以下是：http://jsfiddle.net/9w9et7fp/1/

一种新的希望？

我已经足够搜索并且已经没有想法了。我可能通过使用HTML得到一个解决方法，具有overflow: hidden的固定大小的容器元素，以便我可以模拟边框。但这意味着我必须为我网站中的每个<select>执行此操作。也许有人知道一个不同的解决方案，可以做我正在寻找的东西？即使只使用IE浏览器，我也可以。

Answer 1

正如您所发现的那样，选择元素样式支持非常有限。我以前见过/做过容器方法。有什么理由你不能使用JS解决方案吗？据我所知，它将满足您在整个网站范围内影响所有选定元素的要求。那里有一些表单元素“增强剂”。我已经使用了这两个。

http://designwithpc.com/Plugins/ddSlick#demo

http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

Answer 2

我最后使用了第一次尝试进行妥协的修改。我将边框设置为一个像素宽，并将outline-offset设置为-2像素。在IE中，在轮廓和按钮之间留下了一个看起来可以接受的小空间。在Firefox和其他浏览器中，它看起来像我最初的意图。

有一个缺点：当背景不是白色时，我必须选择是否在大多数浏览器的<select>元素周围留下白色边框，或者边框是否相同将颜色作为背景，并清楚地表明大纲未附加到IE中的<select>。

请参阅我演示的jsFiddle：http://jsfiddle.net/9w9et7fp/6/