css - 选择不显示的菜单样式

Question

我有两个选择菜单，但都不能完全识别我应用的 css 样式。我做错了什么？选择选项时，菜单应显示不同的背景颜色和字体颜色。

http://jsfiddle.net/jasonniebauer/6rLyW/

<select id="select1" onchange='OwnerType(this.value)'>
                <option value="--Choose Type--">--Choose Type--</option>
                <option value="Sole_Proprietor">Sole Proprietor</option>
                <option value="Partnership">Partnership</option>
                <option value="LLC">LLC</option>
                <option value="Private_Corporation">Private Corporation</option>
                <option value="Non_Profit_Tax_Exempt">Non-Profit/Tax Exempt</option>
                <option value="Cooperative">Cooperative</option>
                <option value="Limited_Partnership">Limited Partnership</option>
                <option value="Other">Other</option>
            </select>

<select id="select2" onchange='ReturnPolicy(this.value)'>
                <option value="--Choose Return Policy--">--Choose Return Policy--</option>
                <option value="No_Returns">No Returns</option>
                <option value="Exchange">Exchange</option>
                <option value="30_Day_Refund">Refund within 30 Days</option>
                <option value="Other2">Other</option>
            </select>

select {
            padding: 1rem;
            margin: 0;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border-bottom: 3px #898989;
            /*-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
            background: #F2F2F2;
            color: #BDC3C7;
            outline: none;
            border: none;
            display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor:pointer;
            width: 100%;
            font-size: 1.125em;
            margin: 0 auto;
        }

select:hover {
            color: #898989;
            background: #E8E8E8;
            -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
            -webkit-transition-property: border, color, background-color;
            -webkit-transition-duration: 0.25s, 0.25s, 0.25s;
            -webkit-transition-timing-function: linear, linear, linear;
            -webkit-transition-delay: initial, initial, initial;
            transition: border .25s linear, color .25s linear, background-color .25s linear;
            transition-property: border, color, background-color;
            transition-duration: 0.25s, 0.25s, 0.25s;
            transition-timing-function: linear, linear, linear;
            transition-delay: initial, initial, initial;
        }

select:active {
            color: #898989;
            background: #E8E8E8;
        }

        #select1.Sole_Proprietor, option[value="Sole_Proprietor"],
        #select1.Partnership, option[value="Partnership"],
        #select1.LLC, option[value="LLC"],
        #select1.Private_Corporation, option[value="Private_Corporation"],
        #select1.Non_Profit_Tax_Exempt, option[value="Non_Profit_Tax_Exempt"],
        #select1.Cooperative, option[value="Cooperative"],
        #select1.Limited_Partnership, option[value="Limited_Partnership"],
        #select1.Other, option[value="Other"] {
            background: #3498DB;
            color: #FFFFFF;
        }

#select1.Sole_Proprietor:hover, option[value="Sole_Proprietor"]:hover,
        #select1.Partnership:hover, option[value="Partnership"]:hover,
        #select1.LLC:hover, option[value="LLC"]:hover,
        #select1.Private_Corporation:hover, option[value="Private_Corporation"]:hover,
        #select1.Non_Profit_Tax_Exempt:hover, option[value="Non_Profit_Tax_Exempt"]:hover,
        #select1.Cooperative:hover, option[value="Cooperative"]:hover,
        #select1.Limited_Partnership:hover, option[value="Limited_Partnership"]:hover,
        #select1.Other:hover, option[value="Other"]:hover {
            background-color: #258CD1;
            -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
            -webkit-transition-property: border, color, background-color;
            -webkit-transition-duration: 0.25s, 0.25s, 0.25s;
            -webkit-transition-timing-function: linear, linear, linear;
            -webkit-transition-delay: initial, initial, initial;
            transition: border .25s linear, color .25s linear, background-color .25s linear;
            transition-property: border, color, background-color;
            transition-duration: 0.25s, 0.25s, 0.25s;
            transition-timing-function: linear, linear, linear;
            transition-delay: initial, initial, initial;
        }

#select2.No_Returns option[value="No_Returns"],
        #select2.Exchange option[value="Exchange"],
        #select2.30_Day_Refund option[value="30_Day_Refund"],
        #select2.Other2 option[value="Other2"] {
            background: #3498DB;
            color: #FFFFFF;
        }

Answer 1

这是 CSS 中的一个已知问题。来自Sitepoint reference :

The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser).

一些样式元素仍然可用，例如字体系列等，但其中许多元素将被忽略，以支持用户操作系统的指示。