8

Web サイトのデフォルトのグラデーション背景を取り除こうとしています。-webkit-appereance:none を設定すると、これが可能になることはわかっていますが、ドロップダウンで必要な矢印やその他の動作が失われます。-webkit-appearance: menulist で背景を白に設定する方法はありますか?

これは私が持っているものですが、背景は変わりません

.ius select{
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    height:32px;
    border:1px solid #c8c8c8;
    width:250px;
    background:rgba(255, 255, 255, 0);
    background: transparent;
}
4

1 に答える 1

5

外観プロパティは、通常、次の 2 つの目的で使用されます。

  1. 他の要素のネイティブ スタイルを模倣する
  2. またはすべてのネイティブ スタイルを削除する (外観を none に設定)

かなり怪しい物件です。

ネイティブのデフォルトの背景を削除したいので、外観を none に設定する必要があります。これにより、すべてのスタイル (グラデーションとデフォルトの矢印アイコン)が削除されます。ただし、css を使用してさらにスタイリングを適用できるため、これは大したことではありません。

マークアップを使用:

<select id="menulist">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

そしてCSS：

#menulist {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:20px;
    border:1px solid rgb(156,156,156);
    width:250px;
    text-indent: 8px;
    /**
    * replace this background url with a proper arrow asset
    **/
    background: url('http://placehold.it/5x10') no-repeat 95% 50%;
}

完全な jsfiddle はこちらから入手できます: http://jsfiddle.net/gwwar/vR53Q/2/

このプロパティは Chrome、Safari、および Firefox でのみサポートされているため、おそらく別のルートに進み、ネイティブの選択スタイルを使用するか、完全に制御できるドロップダウン コンポーネントを使用します。

于 2013-08-03T23:49:18.163 に答える