【お問い合わせ】No.5 selectボックスをカスタマイズしよう!
Share
こんなことを説明しています!
- selectボックスの基本形
- disable, selected, hiddenの使い方
- 矢印のカスタマイズ方法
- 矢印ホバー時にselectが開かない問題解消法
解説動画
コードの解説
No.1 ~ No.4のお問い合わせに関する記事はこちら
HTMLの記述
<div class="row"> <div class="head"><span class="must">誕生月</span></div> <div class="data"> <div class="select-wrap"> <select> <option disabled selected>選択してください</option> <option value="item1">1月</option> <option value="item2">2月</option> <option value="item3">3月</option> </select> </div> </div> </div>
ポイント/手順
- selctの中にoptionタグで選択肢を追加
- disabled: 選択できなくする
selected: 初期値
hidden: プルダウン非表示にする - selectタグには擬似要素をつけることができないので、外側をdivタグで囲う
CSSの記述
//====================== // 今回のテーマ //====================== .select-wrap { width: 33%; select { width: 100%; //矢印を消す -webkit-appearance: none; appearance: none; //他のブラウザで角丸になる可能性があるので //角丸をとっておく border-radius: 0; padding: 20px; //focus時の外枠消す(No.1参考) outline: none; &:hover { cursor: pointer; } } //矢印のカスタマイズ position: relative; &::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; //ジェネレーターからコピペ width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 15px; border-color: #000000 transparent transparent transparent; pointer-events: none; } }
ポイント/手順
- select部分の矢印を消す
- 三角形作成ツールのリンクはこちら
- このままだと矢印をクリックしても反応しないので pointer-event: none;を指定