0

これは、選択リストにカスタム矢印を使用するために使用されるスタイルですが、IEおよびMozillaFirefoxでは機能しません。これに対するハック/解決策はありますか？

select{
    -webkit-appearance:none; -moz-appearance:none !important;
    border-radius:4px ; border:#cccccc solid 1px ;
    height:26px; width:210px; padding-left:8px;
    font:normal 14px Myriad Pro, Verdana, Geneva, sans-serif; color:#7f7f7f;
    background-image:url(../images/list_arrow.jpg); background-position:185px;  background-repeat:no-repeat;
}
4

2 に答える 2

3

IE用の純粋なCSSソリューションはわかりませんが、Firefoxでできることはselect、背景がカスタム矢印である別の要素で（矢印だけ！）の矢印を覆い、pointer-events: noneその要素で使用することです。 （これはChromeとSafariでも機能します）。

デモ

HTML：

<select>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>
<div class='arrow'></div>

CSS：

select, .arrow { display: inline-block; vertical-align: middle; }
option { padding: 0 1em; }
.arrow {
    width: 26px;
    height: 26px;
    margin-left: -28px;
    display: inline-block;
    background: url(arrow.png);
    background-size: 100% 100%;
    pointer-events: none;
}

IEの場合、選択の矢印を覆い、矢印を覆っている要素にクリックリスナーを追加し、矢印がクリックされたときに選択を開くこともできます。これは実際にはどのブラウザでも機能しますが、JavaScriptが関係しています。

于 2012-08-21T11:57:03.167 に答える
0 
appearance: none;
-webkit-appearance: none;
-moz-appearance:none;
-o-appearance: none;

このコード全体をすべてのブラウザに使用する必要があります...webkitはchromeとsafariのみをサポートしています...mozはfirefox用です...。

または、選択ボックスのdivに「pointer-events：none」を使用することもできますが、これはIEでは機能しません...

于 2013-09-03T08:37:26.183 に答える