optionタグについて

Question

いろいろ探したりしてみてわからなかったため質問させていただきます。

＜やりたいこと＞
optionタグにパディングを入れて間隔を広げたい
※selectタグはパディングは適用されました。

現在下記のコードでセレクトボックスを作成しているのですが...

<div class="select_box">
<select>
<option value="項目">項目</option>
<option value="項目">項目</option>
<option value="項目">項目</option>
<option value="項目">項目</option>
<option value="項目">項目</option>
</select>
</div>

セレクトボックスを開き出てきたメニューにCSSを入れてみたのですが、上手く適用されず何か方法はありますでしょうか？

select {
    display: block;
    width: 100%;
    padding: 8px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border: 1px solid #a3a2a2;
    border-radius: 5px;
}

select option {
    display: block;
    width: 100%;
    padding: 10px;
}

よろしくおねがいします。

Comments

[m.ts10806]

これは「選択リストで出てきている状態で」ということでしょうか。

[dw_sasaki]

その認識で間違いありません。
セレクトボックスを押した際に出てきた時の表示になります。

Answer 1

出し方はOS側に依存する部分になるので文字装飾程度ならともかくpaddingなどは無理ではないでしょうか。
CSSフレームワークなどでは自由に装飾されているように見えますが
例：Materialize-select
開発ツールで確認したら分かるようにselectをdisplay: none;にしてul-liで実現しているだけだったりします（選択値を変えたときには都度選択値を別途保持しています）

Comments

[dw_sasaki]

なるほどやはりselect optionでは難しいのですね
勉強になります。
難しいそうなので、他のタグでプルダウンメニューを作成して代用しようと思います。
ありがとうございました。

[m.ts10806]

解決されたようで何よりです

Answer 2

残念ながら、<select>を使う限りはどうしようもありません。

そもそも、AndroidやiOSの場合、<select>はOS側のウィジェットを使うので、ドロップダウンにすらなりません。

Comments

[maisumakun]

どうしても特定の見え方にしたければ、自前でHTMLを使って構築するしかないでしょう。

[dw_sasaki]

OSでも結構違うんですね　勉強になります。
別のタグでプルダウンメニューを作成して代用しようと思います。
ありがとうございました。