0

選択メニューが 2 つありますが、どちらも適用した 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;
        }
4

1 に答える 1

0

これは CSS の既知の問題です。サイトポイントのリファレンスから:

select は、使用しているブラウザーとオペレーティング システムによってレンダリングが若干異なり、CSS でスタイルを設定するのが面倒な HTML 要素としてよく知られています (表示はブラウザーによって提供されるのではなく、オペレーティング システムから継承されるため)。

font-family などの一部のスタイル要素は引き続き使用できますが、それらの多くはユーザーの OS の指示に従って無視されます。

于 2013-11-04T23:54:53.593 に答える