为选择框添加自定义样式

Question

我需要在HTML选择框中添加一些自定义样式，完全改变其默认样式。 这是添加自定义样式后我的选择框的方式。

我必须将这些风格提升到一定程度。但仍然不是100％。

这是我的HTML和CSS。

<span class="custom-dropdown large">
    <select class="select select_large">
        <option>Select an Option</option>
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
        <option>Option Four</option>
        <option>Option Five</option>
    </select>
</span>

    .large {
        font-size: 15px;
    }

    .select{
        font-size: inherit; 
        padding: 10px; 
        margin: 0; 
    }

    .select_large {
        background-color: #001848;
        color: #fff;   

    }       

    .select_large option{
        background-color: #dadada;
        color: #000;    
        border: none;
        padding: 2px 5px;
    }       

    .select_large option::hover {
        background-color: #20b390;
    }

    @supports (pointer-events: none) and
              ((-webkit-appearance: none) or
              (-moz-appearance: none) or
              (appearance: none)) {

        .custom-dropdown {
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .select {
            padding-right: 40px;                
            border: 0;
            border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;    
        }       

        .custom-dropdown::before,
        .custom-dropdown::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        .custom-dropdown::after { /*  Custom dropdown arrow */
            content: "\25BC";
            font-size: 20px;
            line-height: 15px;
            right: 10px;
            top: 50%; 
            margin-top: -5px;
        }


        .custom-dropdown::before { /*  Custom dropdown arrow cover */
            width: 40px;
            right: 0; 
            top: 0; 
            bottom: 0;
            border-radius: 0 3px 3px 0;
        }

        .large::before {
            background-color: #001848;
            //background-color: #dadada;
        }

        .large::after {
            color: #dadada;
            //color: #434343;
        }

        @-moz-document url-prefix() {
            .select                     { padding-right: .9em }
            .large .select      { padding-right: 40px }
            .small .select  { padding-right: .5em }
        }
    }

这是FIDDLE

希望有人能帮助我。 谢谢。

Answer 1

选择真的很烦人。这是因为它们依赖于浏览器和操作系统，因此它们中的一部分不具有样式。例如，您可以更改选项的背景颜色，但如果选择了某个选项，则样式会变得混乱（您无法更改所选选项的颜色）。

尝试查看一些jQuery插件，例如ms-Dropdown：http://www.marghoobsuleman.com/jquery-image-dropdown

Answer 2

您最安全的选择是找到一个js插件，该插件将在保持您的功能的同时呈现具有自定义样式的动态。

使用自定义CSS进行自定义的问题在于，它通常是操作它们的操作系统，它的外观会从操作系统变为操作系统，因此几乎不可能在纯粹的CSS中使用统一的样式。

只需搜索＆＃39; jquery selectbox＆＃39;或者＆＃39; jquery自定义选择＆＃39;