Question

我已经了解到选择框样式的最佳方法是将它包装在样式的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>

非常感谢任何帮助！

Answer 1

您实际上是用子元素的背景元素覆盖箭头。因此，select一旦处于:focus状态，就会指定背景颜色。

箭头消失的原因是因为背景不再透明（使您能够透过它看到父div上显示的下拉箭头。

here's a fiddle

我也使select和它的父级具有相同的宽度，所以当你打开它时它看起来并不尴尬。

希望这有帮助！

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

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

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

2 个答案: