3

CSS を使用して選択オプション リストのスタイルを設定しようとしています。リストが押しつぶされているように見えるため、リストの時間の間にさらにパディングが必要です。オプション要素にパディングを追加しようとしましたが、うまくいかないようです。何か案は？

これが私のコードです

HTML

<select name="secondSelect[]" id='second' multiple='multiple' size='8' >
   <option value="1" style="padding: 10px;">Option a 1</option>
   <option value="2" SELECTED >Option b 2(sel)</option>
   <option value="3">Option c 3</option>
   <option value="4" SELECTED >Option d 4 (sel)</option>
   <option value="5">Option e 5</option>
   <option value="6">Option f 6</option>
   <option value="7">Option g 7</option>
   <option value="8">Option h 8</option>
   <option value="9">Option i 9</option>
   <option value="10" SELECTED >Option l 10 (sel)</option>
</select>​

CSS

.ms2side__div select {
    width: 220px;
    float: left;
    border: 1px solid #BFBFBF;
    background: white;
    font-size: 12px;
    color: #9D9D9D;
    font-family: Arial, Helvetica, sans-serif; 
    padding: 10px;
    line-height: 25px;
}​

http://jsfiddle.net/noscirre/GUdhc/

4

4 に答える 4

3

<optgroup>タグを試すことができます：

<optgroup>
        <option value="1">Option a 1</option> 
</optgroup>

optgroup {
   padding: 5px 0px
}

http://jsfiddle.net/GUdhc/5/

于 2012-06-20T11:32:10.197 に答える
0

私が正しければ、オプション要素のパディング、高さ、マージン、またはその他の種類のサイズ変更をサポートするブラウザーは Firefox だけです。(少なくとも Chrome ではサイズの変更が許可されておらず、Chrome ユーザーを無視することはできません) したがって、上記のソリューションは主に Firefox で機能し、他のブラウザーでも機能する可能性があります。

したがって、あなたのオプションは、独自にロールするか、より変更可能な jquery-ui や twitter ブートストラップなどの javascript 要素ライブラリを使用することです。

于 2012-06-20T11:43:00.580 に答える
0

選択ではなくオプション自体にスタイルを設定してみて、オプションのパディングと行の高さに焦点を当てます。ちなみに、セレクター「.ms2side__div」は正しくありません。選択には ID があるため、'select#second' または単に '#second' を使用します。

于 2012-06-20T11:31:03.567 に答える
0

コードサンプルのいくつかを変更しました。しかし、あなたが得ようとしている最高のものは、選択した要素の色の変化であるように私には見えます:

http://jsfiddle.net/GUdhc/25/

ボックス内の何かをクリックすると、「選択された」ものが赤いフォントで表示されます。パディング、マージンなどをそのように変更することはできません。

これを行うには、JavaScript「OnChange」を使用する必要があるかもしれませんが、それは私を超えています。

于 2012-06-20T11:44:48.897 に答える