このページの目的
ブラウザ標準のフォーム部品（入力欄やボタン）は、デザインが古く、サイトの雰囲気と合わないことがよくあります。
このページでは、CSSを使ってフォームの見た目を自由にカスタマイズし、使いやすく、デザイン性の高いフォームを作成するテクニックを学びます。
checklistやることリスト
- CSSでブラウザ標準のスタイルをリセットする
- 入力欄（
<input>,<textarea>）の見た目を整える - フォーカス時（入力中）のスタイルを変更して、分かりやすくする
- 送信ボタン（
<button>）のデザインをカスタマイズする - エラー時など、状況に応じたスタイルを定義する
build実装方法
1. まずは標準スタイルをリセット
フォーム部品は、OSやブラウザごとに独自の見た目を持っています。まずはこれらのスタイルを一度リセットすることで、デザインを当てやすくなります。
/* input, textarea, button に共通のスタイルリセット */
input, textarea, button {
font-family: inherit; /* 親要素のフォントを継承 */
font-size: 100%;
border: none;
border-radius: 0;
-webkit-appearance: none; /* iOSでの角丸などをリセット */
-moz-appearance: none;
appearance: none;
}2. テキスト入力欄のスタイル
枠線、背景色、余白などを指定して、サイトのデザインに合わせます。
.form-input,
.form-textarea {
display: block;
width: 100%;
padding: 12px 16px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #fff;
transition: border-color 0.2s;
}
/* フォーカスが当たった時のスタイル */
.form-input:focus,
.form-textarea:focus {
outline: none; /* 標準の青い枠線を消す */
border-color: #005A9C; /* サイトのメインカラーに */
box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.2); /* 影をつけて分かりやすく */
}3. 送信ボタンのスタイル
サイトの主要なボタン（.button--primaryなど）と同じスタイルを適用すると、統一感が出ます。
.form-submit-button {
display: inline-block;
padding: 12px 30px;
border: none;
border-radius: 6px;
background-color: #005A9C;
color: #fff;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s;
}
.form-submit-button:hover {
background-color: #004a80;
}smart_display実装サンプル集
様々なデザインのフォームのサンプルです。HTMLとCSSをコピーして、ご自身のサイトに合わせてカスタマイズしてみてください。