セレクトボックス(select要素)のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。 つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を整えることができるようなので機会があれば試してみてはいかがでしょうか。 <div class="select-box01"> <select> <option value="">セレクトボックス01</option> <option value="">選択肢01</option> <option value="">選択肢02</option> <option value="">選択肢03</option> <option value="">選択肢04</option> <option value="">選択肢05</option>
![CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge](https://cdn-ak-scissors.b.st-hatena.com/image/square/081472327a12d7e86cbdc03307ad4f5b0ad18f9c/height=288;version=1;width=512/https%3A%2F%2Fedge.sincar.jp%2Fwp%2Fwp-content%2Fuploads%2F2015%2F03%2Fmv.png)