セレクトボックス(ドロップダウンメニュー)のフォーム(基本)

セレクトボックス(ドロップダウンメニュー)を自作する場合にの基本となるデザインの当て方です。

Source Code

右上の「コピー」からご利用ください。

コピー
<form class="my-parts"> <label for="my-parts-select"> <select id="my-parts-select"> <option>セレクトA</option> <option>セレクトB</option> <option>セレクトC</option> </select> </label> </form>
コピー
.my-parts { text-align: left; } .my-parts label { display: inline-block; font-size: .95em; margin: 0 0 .2em; position: relative; } .my-parts label::after { position: absolute; content: ""; top: 50%; right: 8px; transform: translateY(-50%) rotate(-45deg); width: .95em; height: .95em; margin-top: -.2em; display: block; border-left: 3px solid #F44336; border-bottom: 3px solid #F44336; } .my-parts select { width: 100%; padding: .4em 2.4em .4em .8em; border-radius: 0; background-image: none; border: 1px solid rgba(0,0,0,.1); font-family: inherit; font-size: .95em; color: inherit; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .my-parts select::-ms-expand { display: none; } .my-parts select:focus { outline: none; border: 1px solid rgba(0,0,0,.3); box-shadow: none; }

Webパーツ屋とは?

HTMLとCSSをコピペで貼り付ければ実装できるコードをストックしているところです。「このデザインってどうやって実装するんだっけなぁ。。。」と調べる無駄な時間や自分で1からコーディングする時間を短縮することが目的です。

コーディングなんて所詮はデザインにそってHTMLやCSSを当てはめていくだけの単純作業です。当サービス「Webパーツ屋」をご活用いただきスピーディなコーディングを行なっていきましょう!

免責事項

  • すべての環境において同一の表示になるとは限りません。環境に応じてコードは書き換えてください。
  • 当サイト「Webパーツ屋」内のコードは自由に利用していただいて構いませんが、使用したことで何かしらのトラブルが発生しても、管理人のわたしは一切の責任を負わないことをご了承ください。
  • 基本的にはChromeでしか動作確認していません...。