web-dev-qa-db-ja.com

オプションを選択するためにパディングを追加する

Cssを使用してhtmlの選択オプションの間に何らかの種類のスペース（パディング、マージンなど）を追加したいです。私はすでに次のようなものを使用しようとしました：

 select option {
     padding:10px
 }

しかし、うまくいきませんでした。これを行うことは可能ですが、IEでは機能しないことを既に読んでいます。とにかく、IEで動作しなくても、他のブラウザで動作するようにしたいです。

PS：現在Chromeを使用しています

JSFiddleの例

htmlcsscomboboxmarginpadding
16
DaftDev

オプションを選択するスタイリングは、オペレーティングシステム内のすべてのアプリケーション間で一貫性と一貫性を維持するために非常に制限されているため、ブラウザは、ケースオプションタグのような一部の基本要素のスタイルを制限する必要があります。

制限はブラウザごとに異なります。たとえば、パディングやオプションタグのマージンでさえ、Mozilla Firefoxでは機能しますが、クロムでは機能しません。

ウェブサイトでオプションタグのスタイル設定が非常に必要な場合は、jQueryプラグインを使用することをお勧めします（独自のドロップダウンを簡単に作成することもできます）。

11
sumitb.mdi

私の経験では、オプションタグの外観はブラウザによって決定されます。多くの場合、正当な理由により、iOSでの外観の違いを考えてくださいv chromeおよびこの利点。

ただし、ブラウザの接頭辞appearance属性を使用することで、select要素をある程度制御できます。

例えば：

select {
    padding: 2px 10px;
    border: 1px solid #979997;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

ただし、クリックすると、使用しているブラウザで通常のように表示されます。

より細かく制御したい場合は、@ sumitb.mdiが jqueryプラグイン を提案するか、自分で似たようなものをゼロから構築するのが最善の策だと思います。

9
Joshua