お問い合わせフォームやアンケートを作る時、入力欄やチェックボックスの見た目が、ブラウザ標準のままで味気なく感じたことはありませんか。
この記事では、コピペするだけで使えるフォームパーツを20個まとめました。
テキスト入力欄、チェックボックス、トグルスイッチなど、フォームでよく使う部品を幅広く用意しています。
カード・見出しの記事と同じく、HTMLとCSSを分けて掲載しているので、スタイルシートへの追加にもそのまま使えます。
今回も20個、結構なボリュームだね！
うん、使い方だけ先に説明するから、そのあとは気になるところから見てね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、フォームを設置したい場所に貼り付けます。
この記事のパーツは見た目（デザイン）のためのものなので、実際に送信できるフォームにするには、formタグでの送信設定や、サーバー側の処理を別途用意する必要があります。
WordPressの場合は、お問い合わせフォームプラグインの出力に、このデザインのクラス名を当てはめる方法もあります。
01. シンプルテキスト入力欄
枠線と角丸だけの、もっとも基本的な入力欄です。
実際の見た目
HTMLコード
<label class="kts-form01-label" for="kts-f01">お名前</label> <input class="kts-form01" type="text" id="kts-f01" placeholder="山田 太郎">CSSコード
.kts-form01-label { display: block; font-size: 13px; color: #444; margin-bottom: 6px; font-family: sans-serif; } .kts-form01 { width: 240px; padding: 10px 12px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 6px; outline: none; } .kts-form01:focus { border-color: #3F8CFF; box-shadow: 0 0 0 3px rgba(63,140,255,0.15); }02. フローティングラベル入力欄
文字を入力すると、ラベルが上にすっと移動するタイプです。
実際の見た目
HTMLコード
<div class="kts-form02-wrap"> <input class="kts-form02" type="text" id="kts-f02" placeholder=" "> <label class="kts-form02-label" for="kts-f02">メールアドレス</label> </div>CSSコード
.kts-form02-wrap { position: relative; width: 240px; font-family: sans-serif; } .kts-form02 { width: 100%; padding: 16px 12px 6px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 6px; outline: none; } .kts-form02-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #8A94A0; pointer-events: none; transition: 0.15s ease; background: #fff; padding: 0 2px; } .kts-form02:focus + .kts-form02-label, .kts-form02:not(:placeholder-shown) + .kts-form02-label { top: 0; font-size: 11px; color: #3F8CFF; } .kts-form02:focus { border-color: #3F8CFF; }03. アイコン付き検索入力欄
左側に虫眼鏡アイコンを添えた、検索窓によく使われる形です。
実際の見た目
HTMLコード
<div class="kts-form03-wrap"> <span class="kts-form03-icon" aria-hidden="true">🔍</span> <input class="kts-form03" type="text" placeholder="キーワードを入力"> </div>CSSコード
.kts-form03-wrap { position: relative; width: 240px; font-family: sans-serif; } .kts-form03-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; } .kts-form03 { width: 100%; padding: 10px 12px 10px 34px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 999px; outline: none; } .kts-form03:focus { border-color: #3F8CFF; }04. テキストエリア（複数行入力）
お問い合わせ内容などを複数行で入力してもらうための欄です。
実際の見た目
HTMLコード
<label class="kts-form04-label" for="kts-f04">お問い合わせ内容</label> <textarea class="kts-form04" id="kts-f04" rows="4" placeholder="内容をご記入ください"></textarea>CSSコード
.kts-form04-label { display: block; font-size: 13px; color: #444; margin-bottom: 6px; font-family: sans-serif; } .kts-form04 { width: 260px; padding: 10px 12px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 6px; resize: vertical; outline: none; font-family: sans-serif; } .kts-form04:focus { border-color: #3F8CFF; box-shadow: 0 0 0 3px rgba(63,140,255,0.15); }05. カスタムセレクトボックス
標準のプルダウンに、矢印アイコンを添えて見た目を整えたセレクトです。
実際の見た目
HTMLコード
<div class="kts-form05-wrap"> <select class="kts-form05"> <option>選んでください</option> <option>ご予約</option> <option>お問い合わせ</option> <option>その他</option> </select> </div>CSSコード
.kts-form05-wrap { position: relative; width: 240px; font-family: sans-serif; } .kts-form05 { width: 100%; padding: 10px 32px 10px 12px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 6px; appearance: none; -webkit-appearance: none; background: #fff; background-image: linear-gradient(45deg, transparent 50%, #8A94A0 50%), linear-gradient(135deg, #8A94A0 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 12px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }06. カード型ラジオボタン
選択肢をカードのように並べて、選ぶとハイライトされるタイプです。
実際の見た目
HTMLコード
<div class="kts-form06-wrap"> <label class="kts-form06-card"> <input type="radio" name="kts-plan" checked> <span>ライトプラン</span> </label> <label class="kts-form06-card"> <input type="radio" name="kts-plan"> <span>スタンダードプラン</span> </label> </div>CSSコード
.kts-form06-wrap { display: flex; gap: 10px; font-family: sans-serif; } .kts-form06-card { display: flex; align-items: center; gap: 8px; border: 2px solid #D8DCE1; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: #444; } .kts-form06-card input { accent-color: #2E6F5E; } .kts-form06-card:has(input:checked) { border-color: #2E6F5E; background: #EFF6F3; color: #1F2933; }07. カスタムチェックボックス
四角いチェックボックスを、角丸で見やすくデザインし直したものです。
実際の見た目
HTMLコード
<label class="kts-form07-wrap"> <input class="kts-form07" type="checkbox"> <span>メールマガジンを受け取る</span> </label>CSSコード
.kts-form07-wrap { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #444; font-family: sans-serif; cursor: pointer; } .kts-form07 { width: 18px; height: 18px; accent-color: #2E6F5E; cursor: pointer; }08. トグルスイッチ
オン・オフを、スイッチのスライドで表現するパーツです。
実際の見た目
HTMLコード
<label class="kts-form08-wrap"> <input class="kts-form08-input" type="checkbox"> <span class="kts-form08-track"><span class="kts-form08-thumb"></span></span> <span class="kts-form08-text">通知を受け取る</span> </label>CSSコード
.kts-form08-wrap { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: sans-serif; font-size: 14px; color: #444; } .kts-form08-input { display: none; } .kts-form08-track { width: 44px; height: 24px; background: #D8DCE1; border-radius: 999px; position: relative; transition: background 0.2s ease; flex-shrink: 0; } .kts-form08-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .kts-form08-input:checked + .kts-form08-track { background: #2E6F5E; } .kts-form08-input:checked + .kts-form08-track .kts-form08-thumb { transform: translateX(20px); }09. 星クリック式の評価入力
星をクリックして評価を選ぶ、レビュー投稿でよく使われる形です。
実際の見た目
HTMLコード
<div class="kts-form09"> <input type="radio" id="kts-s5" name="kts-rate" value="5"><label for="kts-s5">★</label> <input type="radio" id="kts-s4" name="kts-rate" value="4"><label for="kts-s4">★</label> <input type="radio" id="kts-s3" name="kts-rate" value="3" checked><label for="kts-s3">★</label> <input type="radio" id="kts-s2" name="kts-rate" value="2"><label for="kts-s2">★</label> <input type="radio" id="kts-s1" name="kts-rate" value="1"><label for="kts-s1">★</label> </div>CSSコード
.kts-form09 { display: flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 26px; } .kts-form09 input { display: none; } .kts-form09 label { color: #D8DCE1; cursor: pointer; padding: 0 2px; } .kts-form09 input:checked ~ label, .kts-form09 label:hover, .kts-form09 label:hover ~ label { color: #FFB020; }10. ファイルアップロードボタン風
標準の地味なファイル選択ボタンを、見た目だけ整えたパーツです。
実際の見た目
HTMLコード
<label class="kts-form10-wrap"> <input class="kts-form10-input" type="file"> <span class="kts-form10-btn">ファイルを選択</span> <span class="kts-form10-name">選択されていません</span> </label>CSSコード
.kts-form10-wrap { display: inline-flex; align-items: center; gap: 10px; font-family: sans-serif; } .kts-form10-input { display: none; } .kts-form10-btn { padding: 9px 18px; background: #1F2933; color: #fff; border-radius: 6px; font-size: 13px; cursor: pointer; } .kts-form10-name { font-size: 13px; color: #8A94A0; }11. 検索ボックス＋ボタン一体型
入力欄とボタンをひとつながりに見せる、検索フォームの定番です。
実際の見た目
HTMLコード
<div class="kts-form11"> <input type="text" placeholder="検索キーワード"> <button type="button">検索</button> </div>CSSコード
.kts-form11 { display: flex; width: 280px; font-family: sans-serif; } .kts-form11 input { flex: 1; padding: 10px 14px; font-size: 14px; border: 1px solid #D8DCE1; border-right: none; border-radius: 999px 0 0 999px; outline: none; } .kts-form11 button { padding: 10px 20px; background: #2E6F5E; color: #fff; border: none; border-radius: 0 999px 999px 0; cursor: pointer; font-weight: 600; }12. レンジスライダー
つまみを左右にドラッグして、数値を選ぶパーツです。
実際の見た目
HTMLコード
<label class="kts-form12-label" for="kts-f12">音量</label> <input class="kts-form12" type="range" id="kts-f12" min="0" max="100" value="60">CSSコード
.kts-form12-label { display: block; font-size: 13px; color: #444; margin-bottom: 8px; font-family: sans-serif; } .kts-form12 { width: 220px; accent-color: #3F8CFF; }13. タグ表示風の選択済みリスト
選んだ項目を、バッジのようなタグで並べて見せる表示です。
実際の見た目
デザイン マーケティング
HTMLコード
<div class="kts-form13"> <span class="kts-form13-tag">デザイン <button aria-label="削除">×</button></span> <span class="kts-form13-tag">マーケティング <button aria-label="削除">×</button></span> </div>CSSコード
.kts-form13 { display: flex; gap: 8px; flex-wrap: wrap; font-family: sans-serif; } .kts-form13-tag { display: inline-flex; align-items: center; gap: 6px; background: #EFF6F3; color: #2E6F5E; font-size: 13px; padding: 6px 10px; border-radius: 999px; } .kts-form13-tag button { border: none; background: none; color: #2E6F5E; cursor: pointer; font-size: 13px; line-height: 1; }14. ニュースレター登録フォーム一式
メールアドレス欄とボタンをセットにした、登録フォームの完成形です。
実際の見た目
HTMLコード
<form class="kts-form14"> <input type="email" placeholder="メールアドレスを入力"> <button type="submit">登録する</button> </form>CSSコード
.kts-form14 { display: flex; gap: 8px; font-family: sans-serif; } .kts-form14 input { flex: 1; padding: 10px 14px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 6px; outline: none; } .kts-form14 button { padding: 10px 20px; background: #D97757; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; white-space: nowrap; }15. エラー状態の入力欄
入力に誤りがあることを、赤い枠とメッセージで伝える形です。
実際の見た目
半角数字で入力してください
HTMLコード
<label class="kts-form15-label" for="kts-f15">電話番号</label> <input class="kts-form15" type="text" id="kts-f15" value="abc-1234"> <p class="kts-form15-msg">半角数字で入力してください</p>CSSコード
.kts-form15-label { display: block; font-size: 13px; color: #444; margin-bottom: 6px; font-family: sans-serif; } .kts-form15 { width: 240px; padding: 10px 12px; font-size: 14px; border: 2px solid #E14B4B; border-radius: 6px; outline: none; } .kts-form15-msg { color: #E14B4B; font-size: 12px; margin: 6px 0 0; font-family: sans-serif; }16. 成功状態の入力欄
入力内容が正しいことを、緑の枠とチェックマークで伝える形です。
実際の見た目
HTMLコード
<label class="kts-form16-label" for="kts-f16">ユーザーID</label> <div class="kts-form16-wrap"> <input class="kts-form16" type="text" id="kts-f16" value="katsuyou_taro"> <span class="kts-form16-check" aria-hidden="true">✓</span> </div>CSSコード
.kts-form16-label { display: block; font-size: 13px; color: #444; margin-bottom: 6px; font-family: sans-serif; } .kts-form16-wrap { position: relative; width: 240px; } .kts-form16 { width: 100%; padding: 10px 32px 10px 12px; font-size: 14px; border: 2px solid #2E9E5B; border-radius: 6px; outline: none; } .kts-form16-check { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #2E9E5B; font-weight: 700; }17. 必須マーク付きラベル
入力が必須の項目に、小さな赤いラベルを添える形です。
実際の見た目
HTMLコード
<label class="kts-form17-label" for="kts-f17">お名前<span class="kts-form17-required">必須</span></label> <input class="kts-form17" type="text" id="kts-f17">CSSコード
.kts-form17-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; margin-bottom: 6px; font-family: sans-serif; } .kts-form17-required { background: #E14B4B; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } .kts-form17 { width: 240px; padding: 10px 12px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 6px; outline: none; }18. 利用規約同意チェックリスト
複数の同意項目を、チェックボックスで並べる形です。
実際の見た目
HTMLコード
<div class="kts-form18"> <label><input type="checkbox"> 利用規約に同意する</label> <label><input type="checkbox"> プライバシーポリシーに同意する</label> </div>CSSコード
.kts-form18 { display: flex; flex-direction: column; gap: 10px; font-family: sans-serif; } .kts-form18 label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; } .kts-form18 input { width: 16px; height: 16px; accent-color: #2E6F5E; }19. インラインヒント付き入力欄
入力欄の下に、常時表示のヒント文を添える形です。
実際の見た目
半角英数字8文字以上で入力してください
HTMLコード
<label class="kts-form19-label" for="kts-f19">パスワード</label> <input class="kts-form19" type="password" id="kts-f19"> <p class="kts-form19-hint">半角英数字8文字以上で入力してください</p>CSSコード
.kts-form19-label { display: block; font-size: 13px; color: #444; margin-bottom: 6px; font-family: sans-serif; } .kts-form19 { width: 240px; padding: 10px 12px; font-size: 14px; border: 1px solid #D8DCE1; border-radius: 6px; outline: none; } .kts-form19-hint { font-size: 12px; color: #8A94A0; margin: 6px 0 0; font-family: sans-serif; }20. 数量ステッパー入力
＋とーのボタンで数量を増減させる、購入数の入力によく使われる形です。
実際の見た目
HTMLコード
<div class="kts-form20"> <button type="button" aria-label="減らす">−</button> <input type="text" value="1" readonly> <button type="button" aria-label="増やす">＋</button> </div>CSSコード
.kts-form20 { display: inline-flex; align-items: center; border: 1px solid #D8DCE1; border-radius: 6px; overflow: hidden; font-family: sans-serif; } .kts-form20 button { width: 32px; height: 36px; background: #F1F3F5; border: none; font-size: 16px; cursor: pointer; color: #1F2933; } .kts-form20 input { width: 40px; height: 36px; border: none; border-left: 1px solid #D8DCE1; border-right: 1px solid #D8DCE1; text-align: center; font-size: 14px; outline: none; }カスタマイズの小ワザ
- この記事のパーツは見た目のためのものです。実際に送信・保存させるには、formタグの設定やサーバー側の処理を別途用意してください。
- 09番の星評価や12番のスライダーのように、入力を受け取るだけで送信処理を伴わないパーツは、実際の値をJavaScriptで取得する処理が別途必要です。
- 06番のカード型ラジオボタンは、:has()という比較的新しいCSSの記法を使っています。対応していない古いブラウザでは、選択時のハイライトが効かない場合があります。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）やaccent-colorの値を書き換えてください。
- WordPressのフォームプラグインと組み合わせる場合は、プラグインが出力するHTMLの構造に合わせて、クラス名やセレクタを調整してください。
まとめ｜早見表
| 用途 | 該当するパーツ |
|---|---|
| 文字を入力する | 01, 02, 03, 04, 19 |
| 選択肢から選ぶ | 05, 06, 07, 08, 09 |
| ファイル・数量を扱う | 10, 12, 20 |
| 検索・登録フォーム一式 | 11, 14 |
| 状態を伝える | 15, 16, 17 |
| 複数の同意・タグ | 13, 18 |
フォームの部品って、こんなに種類があるんだね！
うん、入力欄1つでも工夫できることが多いんだ。まずはよく使う入力欄とチェックボックスから試してみてね。
20個のフォームパーツは、入力・選択・状態表示など役割ごとに使い分けられる。見た目のためのパーツなので、実際に動かすには送信処理を別途用意する必要がある。
