ゆきのふ

アイコン付きセレクトボックスを作る方法 セレクトボックスの左側へアイコンを表示する方法を紹介します。通常のセレクトボックスにアイコンを追加するだけで、何を選択するフォームなのかがひと目で分かりやすくなります。 カテゴリー選択や都道府県、配送...

セレクトボックスの矢印アイコンを変更する方法 セレクトボックスの矢印アイコンを変更する方法を紹介します。ブラウザ標準の矢印を非表示にし、CSSの疑似要素を使って独自の下向き矢印を表示するサンプルです。セレクトボックス本体を大きく作り直さず、...

クリックすると枠線を強調するセレクトボックスを作る方法 クリックすると枠線を強調するセレクトボックスを作る方法を紹介します。このサンプルでは3つのセレクトボックスを配置し、クリックやキーボード操作でフォーカスが当たった項目だけを強く目立たせ...

セレクトボックスの見た目をカスタマイズする方法 セレクトボックスの見た目をカスタマイズする方法を紹介します。HTMLとCSSを使って、角丸、影、枠線を設定し、シンプルなセレクトボックスをデザイン性のあるフォームへ変更するサンプルです。Jav...

スクロール付きセレクトボックスを作る方法 スクロール付きセレクトボックスを作る方法を紹介します。通常のプルダウン型セレクトボックスとは異なり、このサンプルでは複数の選択肢を一覧表示し、表示範囲を超えた項目をスクロールして確認できるリスト形式...

項目をグループ分けしたセレクトボックスを作る方法 項目をグループ分けしたセレクトボックスを作る方法を紹介します。このサンプルではHTMLのoptgroup要素を利用し、関連する選択肢をカテゴリごとにまとめて表示できます。選択肢が多いフォーム...

セレクトボックスで選択できない項目を設定する方法 セレクトボックスで選択できない項目を設定する方法を紹介します。このサンプルではHTMLとCSSだけを使用し、一部の選択肢だけを選択できない状態に設定する方法を実装しています。通常の選択肢はそ...