先日、ラジオボタンとチェックボックスのカスタマイズで参考にしたサイトをご紹介しましたが、今回はセレクトボックスのデザインをカスタマイズする際に参考にさせていただいた記事をご紹介します。
ちなみに、先日の投稿記事はこちらから。
さて、今回ご紹介したい記事はこちら。
コピペでできる！cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
https://copypet.jp/797/
かなりシンプルなデザインのセレクトボックスを実装できます。
なお、私は一番上のサンプルを採用させていただきました。
コードはこちら。
なお、私は若干修正させていただいています。
<div class="select_area">
<select name="alphabet>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
.select_area {
overflow: hidden;
width: 100%;
text-align: center;
position: relative;
border: 1px solid #bbbbbb;
border-radius: 2px;
background: #ffffff;
}
.select_area::before {
position: absolute;
top: 22px;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
}
.select_area select {
width: 100%;
height: 50px;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
color: #666666;
}
.select_area select::-ms-expand {
display: none;
}
コードは以上です。
私はデザインの都合上、セレクトボックスの高さを 50px で固定しており、そのため .select_area::before で指定している下向き三角形「▼」の位置もそれに応じて変更しています。
また、横幅も 100% になっています。
このあたりは、上記で挙げたサイトのコードを参考にするか、適宜自分のデザインに合わせて修正してください。
ちなみに、何故セレクトボックスにデザインを適用したかというと、現在開発中の Cordova アプリを iPhone で確認したところ、セレクトボックスがとてもダサくなってしまったためです。
Android だと、シンプルな白いセレクトボックスだったのですが、iOS の場合は、恐らくデフォルトのセレクトボックスのデザインそのままのようでした。
このままだと、ページのデザインにそぐわなかったので、こちらのデザインを使って、他のテキストエリア等のデザインに合わせました。
そのおかげで、ここだけデザインが浮くこともなく、良い感じに整ったのではないかと思います。
以上、セレクトボックスをシンプルなデザインにカスタマイズする方法でした。
コピペで実装できるのでかなり簡単だし、助かりました。
サイトで紹介されている他のセレクトボックスのデザインも素敵ですので、是非参考にしてはいかがでしょうか。
