Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- 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;を指定
Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog