CSS フォーム
CSSを使用すると、HTMLフォームの外観を大幅に改善できます。
inputフィールドのスタイリング
widthプロパティを使用して、入力フィールドの幅を決定します。
-
input[type=text]- テキストフィールドのみを選択します -
input[type=password]- パスワードフィールドのみを選択します -
input[type=number]- 数値フィールドのみを選択します - 等..
Paddingがとられたinput
テキストフィールド内にスペースを追加するには、paddingプロパティを使用します。
ヒント：多数の入力が連続する場合は、marginを追加して、入力の外側にスペースを追加することもできます。
例
box-sizingプロパティをborder-boxに設定していることに注意してください。これにより、パディングと最終的にはボーダーが要素の幅と高さの合計に含まれるようになります。box-sizingプロパティの詳細については、CSS ボックスのサイズ変更を参照してください。
枠線がついたinput
borderプロパティを使用して枠線のサイズと色を変更し、border-radiusプロパティを使用して丸い角を追加します。
下の枠線のみが必要な場合は、border-bottomプロパティを使用します。
色がついたinput
背景色を入力に追加するには、background-colorプロパティを使用し、テキストの色を変更するには、colorプロパティを使用します。
フォーカスされたinput
デフォルトでは、一部のブラウザーは、入力がフォーカスされる(クリックされる)と、入力の周りに青いアウトラインを追加します。この動作は、input 要素にoutline: none;を追加することで削除できます。
入力フィールドがフォーカスされたときに、 :focusセレクターを使用して入力フィールドに対して何らかの処理を行います。
アイコンや画像がついたinput
入力内にアイコンが必要な場合は、background-imageプロパティを使用し、background-positionプロパティでアイコンを配置します。また、アイコンのスペースを確保するために大きな左パディングを追加していることにも注意してください。
例
アニメーションがついた検索のinput
この例では、CSStransitionプロパティを使用して、フォーカスを取得したときに検索入力の幅をアニメーション化します。トランジション プロパティについては、後ほどCSS トランジション章で詳しく説明します。
テキストエリアのスタイリング
ヒント：テキストエリアのサイズが変更されないようにするには、resizeプロパティを使用します(右下隅の「グラバー」を無効にします)。
例
選択メニューのスタイリング
例
inputボタンのスタイリング
例
レスポンシブフォーム
ブラウザーウィンドウのサイズを変更して効果を確認します。画面の幅が 600px 未満の場合は、2 つの列を隣同士ではなく、互いに重ねて配置します。
自分で試してみる»
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。