样式选择框上的下拉插入符号在焦点上消失答案

【问题标题】：Dropdown caret on styled select box disappears on focus样式选择框上的下拉插入符号在焦点上消失
【发布时间】：2014-10-15 10:26:36
【问题描述】：

我了解到设置选择框样式的最佳方法是将其包装在一个带样式的 div 中，所以我做到了；我的 div 有一类选择样式。我希望选择框的背景颜色在焦点上改变，但我一生都无法弄清楚如何保留下拉插入符号（这是背景图像）。

这是我的代码：

<!doctype html>
 <html>
     <head>
        <title>Select Box Styling</title>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background-color: #FFF;
                font-family: Helvetica, Arial, sans-serif;
                padding: 30px;
                margin: 0;
            }

            .select-style {
               width: 240px;
               height: 34px;
               overflow: hidden;
               background: transparent url('dropdown-arrow4.gif') no-repeat right;
               border: 1px solid #8DC63F;
               border-radius: 4px;
            }

            .select-style select {
                background-color: transparent;
                width: 268px;
                padding: 5px;
                font-size: 14px;
                line-height: 1;
                border: 0;
                border-radius: 0;
                height: 34px;
                -webkit-appearance: none;
                font-family: Helvetica, Arial, sans-serif;
                color: #222;
            }

            .select-style select:focus,
            .select-style select:active {
                outline: none;
                background-color: #ECF7CB;
            }
        </style>
    </head>
    <body>
        <div class="select-style">
            <select>
               <option>The first option</option>
               <option>The second option</option>
               <option>The third option</option>
            </select>
        </div>
    </body>
 </html>

任何帮助将不胜感激！

【问题讨论】：

标签： css select input

【解决方案1】：

您实际上是用子元素的背景元素覆盖箭头。所以你的select，一旦它处于:focus 状态，指定背景颜色。

箭头消失的原因是因为背景不再透明（使您能够看穿它并看到出现在父 div 上的下拉箭头。

here's a fiddle

我还使选择及其父项具有相同的宽度，因此当您打开它时它看起来并不尴尬。

希望这会有所帮助！

编辑：如果您希望箭头显示同时仍保留绿色样式，则需要将 background 属性应用于您的 select:focus CSS 选择器，以便它始终具有背景图像（下拉插入符号) 无论其当前状态如何定义。

【讨论】：

【解决方案2】：

我试过了，但它不起作用。幸运的是，我想出了如何使用 jQuery：

<script>
    $(document).ready(function() {
        var selectStyle = $('.select-style');

        $('.select-style select').focus(function() {
            $(selectStyle).addClass('select-box-highlight');
        }).blur(function() {
            $(selectStyle).removeClass('select-box-highlight');
        });
    });
</script>

其他 CSS：

.select-box-highlight {
    outline: none;
    background-color: #ECF7CB;
}

【讨论】：