CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでフォーム入力欄に背景色を設定する方法

フォームの入力欄（input要素）に背景色を追加したい場合は、CSSの background-color プロパティを使用します。このプロパティを使うことで、テキストボックスの見た目をカスタマイズし、フォーム全体のデザイン性や視認性を高めることができます。

background-colorプロパティの基本

background-color プロパティには、色名（例：gray）、16進数カラーコード（例：#808080）、RGB値など、さまざまな形式で色を指定できます。属性セレクタ（input[type=text]）を使えば、テキスト入力欄だけを対象にスタイルを適用することも可能です。

実装例

以下のコードでは、テキスト型の入力欄に対して背景色「gray」を設定しています。実際にコードを実行して、背景色がどのように反映されるか確認してみてください。

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        padding: 10px 15px;
        margin: 5px 0;
        box-sizing: border-box;
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <p>以下のフォームに入力してください。</p>
    <form>
      <label for="subject">科目</label>
      <input type="text" id="subject" name="sub">
      <label for="student">学生名</label>
      <input type="text" id="student" name="stu">
    </form>
  </body>
</html>

コードのポイント解説

  • width: 100%; … 入力欄を親要素の幅いっぱいに広げます。
  • padding: 10px 15px; … 入力欄の内側に余白を設け、文字を見やすくします。
  • box-sizing: border-box; … paddingやborderを含めて幅を計算するため、レイアウト崩れを防げます。
  • background-color: gray; … 入力欄の背景色をグレーに設定します。

このように background-color プロパティを活用すれば、簡単な記述だけでフォーム入力欄のデザインを向上させることができます。フォーカス時の色変更（:focus 疑似クラス）と組み合わせると、さらに使いやすいフォームになります。

  1. CSSを使って全幅画像の上にフォームを重ねて表示する方法

    Webサイトのヒーローセクションなどで、全幅画像（フルスクリーンの背景画像）の上にログインフォームや登録フォームを重ねて表示したいケースはよくあります。CSSのbackground-imageとpositionプロパティを組み合わせることで、簡単に実現できます。以下は、CSSを使用して全幅画像の上にフォームを追加するコード例です。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale

  2. CSSのcaret-colorプロパティでキャレット（テキストカーソル）の色を変更する方法

    テキスト入力時に表示される挿入キャレット（テキストカーソル）の色を変更するには、CSSのcaret-colorプロパティを使用します。このプロパティを使うことで、input要素やtextarea要素などの編集可能な要素において、デフォルトの黒いカーソルを任意の色にカスタマイズできます。caret-colorプロパティの基本caret-colorプロパティには、以下のような値を指定できます。任意の色：red、chartreuse、#ff0000 などの色名やカラーコードtransparent：キャレットを非表示にする（透明化）auto：ブラウザのデフォルト設定に従う例1：キャレットの色を変更する