CSSで一般的なフォーム要素のスタイルを設定する方法

提供：Dev Guides
移動先:案内、検索

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Webフォームは、検索フォームフィールドから連絡先フォーム、複雑なデータフィルタリングに至るまで、Webサイトデザインの一般的な要素です。 CSSを使用してこれらの要素のスタイルを設定し、操作する方法を知っていると、これらの日常的な問題に対するより良い解決策を提供し、ユーザーのWebサイトのエクスペリエンスを向上させることができます。

このチュートリアルでは、ユーザーにさまざまなデータを要求するWebフォームの作成とスタイル設定について説明します。 フォームは、テキストフィールド、ラジオボタン、チェックボックス、ドロップダウン選択、テキスト領域、および送信ボタンとリセットボタンを使用します。 appearanceプロパティを使用してスタイルをリセットし、フォームに独自の一貫したスタイルを設定し、テキストフィールドにプレースホルダーの回答を追加し、ラジオボタンとチェックボックスをカスタマイズして、このフォームとその要素を作成およびスタイル設定します。さまざまな疑似クラスと疑似要素。

前提条件

  • 高度なセレクターを使用して、CSSを使用してスタイルを検索してHTML要素に適用した経験。 詳細については、 CSS チュートリアルでID、クラス、および属性セレクターを使用してHTML要素を選択する方法を確認してください。
  • CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
  • CSSの疑似クラスに精通していること。 紹介については、CSSで状態疑似クラスでリンクとボタンを使用する方法を確認してください。
  • ローカルマシンにindex.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。

ベースHTMLとCSSの設定

この最初のセクションでは、チュートリアルの残りの部分で使用するHTMLと初期スタイルを設定します。 このHTMLは、ページのスキャフォールディングを設定し、後でスタイルを設定するフォームフィールドを作成します。

まず、エディターでindex.htmlファイルを開きます。 次に、次のHTMLを追加して、ファイルの基本構造を提供します。

index.html 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

<head>要素に含まれる要素は、<title>要素を使用してページの名前を定義し、<link>要素を介してスタイルシートをロードする場所を定義します。 <meta>タグは、文字エンコードを定義し、小さな画面のデバイスでサイトを表示する方法をブラウザーに指示します。 メインフォームの内容は、<body>および<main>タグ内にあります。

次に、<main>要素内に、<form>要素を作成します。 <form>内に、レイアウトに役立つさまざまなフォーム要素と<div>要素を追加します。 このチュートリアルでは、前のステップからのコードへの追加が強調表示されています。 次のコードブロックから強調表示されたHTMLをindex.htmlファイルに追加します。

index.html 

...
<main>
  <form>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" />
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="email" />
    </div>
    <div>
      <label for="comp">Favorite CSS Compiler</label>
      <select id="comp">
        <option value="sass">Sass</option>
        <option value="less">Less</option>
        <option value="stylus">Stylus</option>
        <option value="postcss">PostCSS</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div>
      <fieldset>
        <legend>Are you familiar with CSS Grid?</legend>
        <input type="radio" name="grid" id="yes" value="yes" />
        <label for="yes">Yes</label>
        <input type="radio" name="grid" id="no" value="no" />
        <label for="no">No</label>
      </fieldset>
    </div>
    <div class="full-width">
      <label for="message">Message</label>
      <textarea id="message"></textarea>
    </div>
    <div class="full-width">
      <input type="checkbox" id="newsletter" />
      <label for="newsletter">Receive our newsletter?</label>
    </div>
    <div class="full-width">
      <button type="submit">Send Response</button>
      <button type="reset">Clear Form</button>
    </div>
  </form>
</main>
...

HTMLフォーム構造は、正しく機能するために相互接続された属性値で構成されています。 このコードは、ユーザーに名前と電子メールを要求し、お気に入りのCSSコンパイラーを要求し、CSSグリッドを知っている場合はユーザーが生成するメッセージのフィールドを提供し、ユーザーにニュースレターを登録するためのチェックボックスを備えたフォームを作成します。 。 HTMLでフォームを構造化する方法の詳細については、Webフォーム構造の MozillaWebDocsページを参照してください。

必ずindex.htmlに変更を保存してから、styles.cssという同じディレクトリに新しいファイルを作成してください。

テキストエディタでstyles.cssを開きます。 このファイルは、ブラウザがindex.htmlのコンテンツに適用するスタイルを提供します。 次のCSSコードをstyles.cssファイルに追加します。

styles.css 

body {
  margin: 0;
  background-color: hsl(0, 0%, 98%);
  color: #333;
  font: 100% / normal sans-serif;
}

main {
  margin: 0 auto;
  padding: 4rem 0;
  width: 90%;
  max-width: 60rem;
}

form {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 100%);
  border: 4px solid hsl(0, 0%, 90%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.full-width {
  grid-column: span 2;
}

bodyおよびmain要素セレクターは、ページ全体の初期テキストスタイルとレイアウトを作成します。 form要素セレクターは、フォームコンテナー全体のスタイルを作成し、grid-template-columns: 1fr 1fr;と同じサイズの2つの列で構成されるCSSグリッドを定義します。 次に、gap: 2remは、グリッド内の各行と列の間に2remの間隔を提供します。 最後に、.full-widthクラスセレクターを使用すると、このクラスのコンテナーを1つの列にとどまらずに、2つの列の間で拡張できます。

変更をstyles.cssに保存します。 次に、選択したWebブラウザを開きます。 ブラウザでファイルメニュー項目を選択し、開くオプションを選択します。 次に、プロジェクトフォルダーに移動し、ブラウザーにindex.htmlファイルをロードします。 次の画像は、ページがブラウザでどのようにレンダリングされるかを示しています。

フォームは、明るい灰色の背景の白いボックスに表示されます。 各フォーム要素はグリッド全体に分散され、上位4つのアイテムが2つの列の間で交互に配置され、最後の3つのアイテムが2つの列にまたがって積み重ねられます。 フォーム要素のデフォルトのスタイルは、Firefoxに表示されるとおりです。 各ブラウザには、フォーム要素のスタイル設定のデフォルトが異なります。

このセクションでは、フォーム要素を操作するために必要な初期HTMLとCSSを設定します。 また、各ブラウザーがこれらの要素のスタイル設定を異なる方法で処理することも学びました。 次のセクションでは、appearanceプロパティを使用して、すべてのブラウザーでフォーム要素のスタイルを均等化します。

appearanceプロパティを使用したフォームスタイリングのリセット

すべてのブラウザは、フォーム要素の視覚的なスタイル設定を異なる方法で処理します。 多くの場合、これらの要素のスタイルはCSSの初期機能を超えており、オペレーティングシステムまたはブラウザー独自のデザイン言語の美学に従います。 すべてのブラウザで一貫したスタイルを作成するために、このセクションでは、appearanceプロパティおよびその他のプロパティを使用して、デフォルトのブラウザスタイルを削除します。

まず、テキストエディタでstyles.cssを開きます。 button、fieldset、input、legend、select、およびtextareaで構成される新しいグループセレクターを作成します。 次に、セレクターブロック内に、次のコードブロックで強調表示されているように、appearanceプロパティをnoneに設定して追加します。

styles.css 

...
button,
fieldset,
input,
legend,
select,
textarea {
  appearance: none;
}

appearanceプロパティは、フォーム要素から特別なスタイルを削除するための意図された方法です。 ただし、このプロパティの古さと実装により、ほとんどのブラウザでは、プロパティ名にベンダープレフィックスを追加する必要があります。 ベンダープレフィックスは、特定のブラウザーの識別子としてプロパティ名の前に付加される特別なコード化された追加です。 Chrome 、 Safari 、および最近のバージョンのEdgeとOperaの場合、そのプレフィックスは-webkit-です。 Firefoxは-moz-プレフィックスを使用します。

ベンダープレフィックスを使用する場合は、プロパティのベンダープレフィックスバージョンを最初に配置し、プレフィックスなしのバージョンで終了することが重要です。 このように、プレフィックス付きプロパティのみをサポートする古いブラウザはプレフィックスを使用しますが、プレフィックスと非プレフィックスバージョンの両方をサポートする新しいブラウザはプレフィックスなしの標準バージョンを使用します。 次のコードブロックでフォーマットされているように、強調表示されたプレフィックスappearanceプロパティを追加します。

styles.css 

legend,
fieldset,
select,
textarea,
input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

変更内容をstyles.cssに保存し、ブラウザでindex.htmlを開きます。 appearanceプロパティは、次の画像に示されているように、装飾されたスタイルを削除し、よりシンプルなスタイルになりました。

appearanceプロパティでは、ブラウザ固有のスタイルのみを変更できます。 appearance: noneプロパティ値に加えられた最大の変更は、ラジオボタンとチェックボックスを完全に削除することでした。 残りのフォーム要素については、デフォルトのスタイルを完全に削除するために、さらにいくつかのプロパティが必要です。 次のコードブロックで強調表示されているCSSプロパティは、デフォルトのスタイルを削除するために必要なスタイルを追加します。

styles.css 

...
button,
fieldset,
input,
legend,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

このCSSは背景色を削除し、ボックスモデルのパラメーターをリセットします。 これらのスタイルのすべてがすべての要素に必要なわけではありませんが、これらのリセットスタイルをすべての要素にグループ化することは許容されます。

変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新してください。 次の画像に示すように、フォーム要素がページから視覚的に消えています。

このセクションでは、appearanceと追加のプロパティを使用して、フォーム要素からデフォルトのスタイルを完全に削除しました。 また、ベンダープレフィックスを使用して、将来のブラウザバージョンにプロパティを適切に順序付けて適用しました。 次のセクションでは、フォームフィールドの視覚的なスタイルのカスタマイズを開始します。

フォームフィールド全体で一貫したスタイルを設定する

デフォルトのブラウザスタイルが完全に削除されたので、すべてのフォーム要素に一貫したカスタム美学を適用します。 これには、適切なスタイルを受け取るために特定のフォーム特性を対象とするさまざまなグループセレクターの作成が含まれます。

まず、テキストエディタでstyles.cssを開きます。 次に、input、select、およびtextareaで構成されるグループセレクターを作成します。 次のコードブロックから強調表示されたスタイルを追加します。

styles.css 

...
legend,
fieldset,
select,
textarea,
input,
button {
  ...
}

input,
select,
textarea {
  border: 2px solid #333;
  background-color: white;
  border-radius: 0.25rem;
}

これらのスタイルは、白い背景と丸みを帯びた角とともに、各データ入力要素の周りに2pxダークグレーの境界線を追加します。

次に、内部にテキストを含むデータ入力要素にスタイルを適用します。 属性セレクターを使用して、type属性値に基づいてターゲットにするinput要素を指定します。 次のコードブロックで強調表示されているCSSは、必要な要素のスタイルを提供します。

styles.css 

...
input,
textarea,
select {
  ...
}

input[type="text"],
input[type="email"],
select,
textarea {
  font: 1.25rem / 1.5 sans-serif;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

これらのスタイルは、すべての要素に一貫したフォントサイズとファミリを適用します。 たとえば、<textarea>要素は、body要素からフォント設定を継承しません。 display、box-sizing、width、およびpaddingプロパティは、これらの各データ入力要素に一貫したレイアウトと構造を提供します。

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 次の画像でレンダリングされているように、フィールドの周囲に濃い灰色の境界線があり、<select>要素のテキストがはるかに大きくなっています。

次に、あなたがすでに書いた幅広いスタイリングに加えて、いくつかの特別なスタイリングを必要とする2つの要素があります。 1つは、textareaの高さを高くすることであり、2つ目は、<select>要素にカスタムのドロップダウン矢印を適用することです。

styles.cssに戻り、textarea要素セレクターを追加します。 セレクターブロック内に、10remの値に設定されたmin-heightプロパティを作成します。 これにより、フォームユーザーがテキストを入力するためのより大きな初期領域が作成されます。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css 

...
input[type="text"],
input[type="email"],
select,
textarea {
  ...
}

textarea {
  min-height: 10rem;
}

textareaのスタイルを追加したら、次に実行するのはimageディレクトリを作成することです。 これは、index.htmlおよびstyles.cssファイルと同じディレクトリ内からコマンドプロンプトで次のコマンドを実行することで実行できます。 

mkdir images

次に、次のcurlコマンドを実行して、作業する最初のイメージを新しいimagesディレクトリにダウンロードします。 

curl -sL https://assets.digitalocean.com/articles/68129/down-arrow.svg -o images/down-arrow.svg

ダウンロードした画像はSVGで、図形を描くためのHTMLに似たマークアップ言語です。

この新しい画像を<select>要素に追加するには、styles.cssに戻ります。 次に、select要素セレクターを作成し、次のコードブロックから強調表示された値を使用してbackgroundプロパティを追加します。

styles.css 

...
textarea {
  min-height: 10rem;
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}

このbackgroundプロパティは、画像を<select>要素の背景にロードし、画像を繰り返しません。 次に、centerで画像を垂直方向に中央揃えし、right 0.75remで右側からオフセットします。

変更内容をstyles.cssに保存し、ブラウザに戻ってページを更新します。 <textarea>は元の高さの約2倍になり、<select>要素の右側に青い下向きの矢印が表示されます。 次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

このセクション全体を通して、フォームのデータ入力要素のカスタム美学を作成しました。 また、<select>要素の背景を作成して、デフォルトの矢印を置き換えました。 次のセクションでは、カスタムのラジオボタンとチェックボックスを作成し、それらがオンになっているときに選択した状態を適用します。

:checked疑似クラスを使用したラジオボタンとチェックボックスのカスタマイズ

フォームの基本的な美学を作成したので、ラジオボタンとチェックボックスのインタラクティブなinputアイテムにその視覚スタイルを適用します。

テキストエディタでstyles.cssを開くことから始めます。 radioまたはcheckboxのtype属性を持つinput要素を、同じ高さと幅の値を持つように変更します。 次に、ラジオボタンを円に変えます。 次のコードブロックの強調表示された部分は、これがどのようにフォーマットされているかを示しています。

styles.css 

...
select {
  ...
}

input[type="radio"],
input[type="checkbox"] {
  height: 1.5em;
  width: 1.5em;
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

vertical-alignプロパティは、インラインテキストアイテムを整列するためのものです。 これをmiddleに設定すると、入力フィールドはテキスト整列の中央に配置されます。 次に、heightとwidthが同じであるため、border-radiusプロパティが50%のラジオ入力は円を作成します。

変更内容をstyles.cssに保存し、ブラウザでindex.htmlを開きます。 次の画像に示すように、2つのラジオボタンとチェックボックスが大きくなり、目立つようになりました。

ラジオボタンまたはチェックボックスを操作すると、何も表示されません。 appearanceプロパティは、これらのタイプの入力に対して選択されたインジケーターも削除します。 次に、:checked疑似クラスセレクターを使用して、選択した入力項目にスタイルを適用します。

styles.cssに戻り、:checked疑似クラスを使用してラジオボタン入力用の新しいセレクターを作成します。 次に、セレクターブロック内にbackground-imageとradial-gradientを追加して、選択したラジオボタンに塗りつぶしスタイルを適用できるようにします。 次のコードブロックで強調表示されているCSSは、これがどのようにフォーマットされているかを示しています。

styles.css 

...
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-image: radial-gradient(
    hsl(213, 73%, 50%) 40%,
    transparent calc(40% + 1px)
  );
}

calc()関数を使用すると、transparentプロパティを色の値の後に1pxに設定して、入力フィールド内に青い実線の円を作成できます。

変更内容をstyles.cssに保存し、ブラウザでindex.htmlに戻ります。 ラジオボタンは、入力内の白で囲まれた青い丸で囲まれています。 次の画像は、はいラジオボタンが選択されていることを示しています。

次に、チェックボックスは、<select>ドロップダウンの矢印と同様に、背景画像を使用して:checkedの状態を示します。

次のcurlコマンドを実行して、チェックマーク画像をimagesディレクトリにダウンロードします。 

curl -sL https://assets.digitalocean.com/articles/68129/check.svg -o images/check.svg

画像をダウンロードして使用する準備ができたら、テキストエディタでstyles.cssに戻ります。

次に、:checked疑似クラスがアタッチされたinput[type="checkbox"]セレクターを追加します。 セレクターブロックに、backgroundプロパティを追加します。このプロパティはcheck.svg画像を読み込み、ボックスに収まるように縮小します。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

stlyes.css 

...
input[type="radio"]:checked {
  ...
}

input[type="checkbox"]:checked {
  background: url('images/check.svg') no-repeat center / 75% auto;
}

backgroundプロパティ値は、チェックマーク画像がコンテナの中央に配置され、繰り返されず、比例して75％縮小されることを保証します。

変更内容をstyles.cssに保存してから、ブラウザでページを更新してください。 ニュースレターを受信するチェックボックスをオンにすると、次の画像に示すように、チェックマークが内部に表示されます。

このセクションでは、カスタムラジオボタンと入力フィールドを作成し、:checked疑似クラスを使用して選択した状態を調整しました。 次のセクションでは、ページの<label>要素と<legend>要素のスタイルを設定します。

ラベルと凡例に特別なスタイルを追加する

次にスタイルを設定する要素は、フォームの<label>要素と<legend>要素です。 使用される2つの異なるスタイルがあります。ラジオボタンとチェックボックスの小さなラベルスタイルと、残りの要素の大きなラベルスタイルです。

テキストエディタでindex.htmlを開きます。 以下で強調表示されているように、class属性を<label>および<legend>のそれぞれにlarge-labelまたはsmall-labelのいずれかの値で追加します。コードブロック：

index.html 

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" />
  </div>
  <div>
    <label for="comp" class="large-label">Favorite CSS Compiler</label>
    ...
  </div>
  <div>
    <fieldset>
      <legend class="large-label">Are you familiar with CSS Grid?</legend>
      <input type="radio" name="grid" id="yes" value="yes" />
      <label for="yes" class="small-label">Yes</label>
      <input type="radio" name="grid" id="no" value="no" />
      <label for="no" class="small-label">No</label>
    </fieldset>
  </div>
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message"></textarea>
  </div>
  <div class="full-width">
    <input type="checkbox" id="newsletter" />
    <label for="newsletter" class="small-label">Receive our newsletter?</label>
  </div>
  ...
</form>
...

これらの追加をindex.htmlに保存し、テキストエディタでstyles.cssを開きます。

styles.cssで、.large-labelクラスセレクターを追加し、次のコードブロックで強調表示されているように次のプロパティを追加します。

styles.css 

...
.full-width {
  grid-column: span 2;
}

.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}
...

これらのスタイルは、large-label要素を大きく太字に設定し、フォントサイズは1.5remで、24pxと同等です。 次に、margin-bottomプロパティは、ラベルとそれに対応するものの間にいくらかのスペースを提供します。

この変更をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 次の画像に示すように、データ入力フィールドの上のラベルテキストは大きく太字になります。

styles.cssに戻り、.small-label用の別のクラスセレクターを作成します。 これらはラジオボタンまたはチェックボックスの右側にあるラベルであるため、.large-labelとは異なる間隔とサイズのスタイルが必要になります。 強調表示されたCSSを次のコードブロックからstyles.cssに追加します。

styles.css 

...
.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}

.small-label {
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 1.5rem;
  font: 1.25rem sans-serif;
}
...

vertical-align: middleはテキストをわずかにオフセットします。 フォントは1.25remに設定されています。これは、20pxと同等で、sans-serifフォントを使用します。 左右のmarginプロパティは、入力フィールドとラベルの間にスペースを提供します。

更新をstyles.cssに保存し、ブラウザーでindex.htmlを更新します。 次の画像に示すように、ラジオボタンとチェックボックスの横のラベルが大きくなり、間隔が広くなりました。

このセクションでは、入力値との関係に基づいて、2つの異なるタイプのラベルのスタイルを作成しました。 ラベルが目立つようになり、フォーム全体で読みやすく、ナビゲーションしやすくなりました。 次のセクションでは、placeholder属性を使用したデータフォーマットの例を示します。

::placeholder疑似要素を使用したプレースホルダーコンテンツの提供

inputまたはtextarea要素のプレースホルダーコンテンツは、フォームユーザーに、要求されている情報の種類とそのフォーマット方法の視覚的なデモンストレーションを提供します。 placeholder属性は、それを説明する値とともにHTMLに追加されます。 次に、::placeholder疑似要素を使用して、テキストの外観をカスタマイズできます。

プレースホルダーコンテンツの作成を開始するには、テキストエディターでindex.htmlを開きます。 名前テキスト<input />、電子メール<input />、および<textarea>要素にplaceholder属性を追加します。 次のコードブロックで強調表示されているHTMLは、placeholderを追加する場所と使用する値を示しています。

index.html 

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" placeholder="First or Full Name" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" placeholder="[email protected]" />
  </div>
  ...
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message" placeholder="Leave a message…"></textarea>
  </div>
  ...
</form>
...

変更内容をindex.htmlに保存し、Webブラウザでページを開きます。 これらの3つのテキスト入力領域には、コンテンツが含まれています。 これらのテキスト入力フィールドが選択され、コンテンツが追加されると、プレースホルダーテキストはブラウザによって削除されます。 次の画像は、デフォルトのプレースホルダースタイルがブラウザーにどのように表示されるかを示しています。

placeholderのスタイルを設定するには、テキストエディタでstyles.cssを開きます。 input::placeholderおよびtextarea::placeholderのグループセレクターを追加します。 ブラウザが疑似クラスと疑似要素の違いを認識する方法であるため、セレクタと疑似要素の間には必ず二重コロンを使用してください。 次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css 

...
textarea {
  min-height: 10rem;
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* Firefox */
  color: hsl(213, 73%, 50%);
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}
...

注意すべき点の1つは、Firefoxがフルカラー値を取得するには、opacity値を1に設定する必要があるということです。 それ以外の場合、Firefoxはopacityを減らし、テキストの色を暗くし、色の値に応じてアクセス可能な色のコントラストの問題を引き起こします。 これはFirefoxのみの状況であるため、opacityプロパティの存在の目的を説明するコメントがあります。

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 プレースホルダーのテキストは、ドロップダウン矢印とラジオボタンとチェックボックスの選択された状態に使用されるのと同じ青色になりました。 次の画像は、ブラウザがplaceholderコンテンツをレンダリングする方法を示しています。

このセクションでは、テキスト入力フィールドにplaceholderコンテンツを作成し、::placeholder疑似要素を使用してスタイルを設定しました。 次のセクションでは、フォーム<button>要素のカスタムスタイルを作成します。

インタラクティブボタンスタイルの作成

Webフォームでは、<button>要素は、フォームを送信またはリセットするためによく使用されます。 index.htmlには、typeのsubmitとresetの2つのボタンがあります。 どちらも機能的には便利ですが、反対のアクションを実行します。 submitボタンはフォームをプロセッサに送信し、resetボタンはフォームから入力されたすべてのデータをクリアします。 これらの異なるアクションのために、<button>要素も視覚的に異なるように見える必要があります。

まず、テキストエディタでstyles.cssを開き、button要素セレクタを作成します。 このセレクターブロックでは、次のコードブロックで強調表示されているように、submit要素とreset<button>要素の間で共有されるスタイルを追加します。

styles.css 

...
input[type="checkbox"]:checked {
  background: url("images/check.svg") no-repeat center / 75% auto;
}

button {
  font: 1.25rem sans-serif;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0.75rem 1.25rem;
}

fontは、両方のボタンが同じフォントスタイルとサイズになるように設定します。 次に、border-radiusは両方のボタンに丸い角を追加します。 cursorプロパティは、カーソルのスタイルをハンドスタイルのポインタに変更します。 最後に、paddingプロパティは、ボタンの内側の周りのスペースを定義します。

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 パディングにより、ボタン内のテキストが大きくなり、テキスト間の間隔が視覚的に大きくなります。 次の画像は、ブラウザでボタンがどのようにレンダリングされるかを示しています。

次に、styles.cssに戻り、各ボタンtypeのスタイルを追加します。 submitボタンには、青色のbackground-colorとwhiteのテキストカラーを追加します。 resetボタンには、リンクのような下線とmarginが追加され、ボタンの間にスペースが追加されます。 次のコードブロックから強調表示されたCSSをstyles.cssファイルに追加します。

styles.css 

...
button {
  ...
}

button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

これらの追加をstyles.cssに保存してから、テキストエディタでindex.htmlを更新してください。 次の画像に示すように、submitボタンは青と白で目立つようになり、resetは下線付きのテキストになりました。

<button>要素にはデフォルトで:hover状態がないため、これをスタイルに追加します。 :hover状態は、カーソルがボタン上にあることをカーソルユーザーが視覚的にフィードバックできるようにするのに役立ちます。

これらの<button>要素の:hover状態を作成するには、テキストエディタでstyles.cssに戻ります。 submitボタンのbackgound-colorをホバー時に暗くするように設定します。 次に、resetボタンにカーソルを合わせたときに下線をドロップします。 次のコードブロックで強調表示されているHTMLは、これらのスタイルの記述方法を示しています。

styles.css 

...
button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="submit"]:hover {
  background-color: hsl(213, 73%, 40%);
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

button[type="reset"]:hover {
  text-decoration: none;
}

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 次のアニメーションが示すように、<button>要素は、マウスカーソルをそれらの上に置くとスタイルをシフトします。

このセクションでは、<button>要素のスタイルを作成して、それらの違いを視覚的に目立たせるようにしました。 cursorプロパティを調整して、ホバー時のカーソルの表示方法を変更しました。 また、各ボタンに適用するカスタムスタイルを作成して、視覚的なフィードバックをさらに提供しました。 最後のセクションでは、フォーム要素が現在:focus疑似クラスで使用されているときにスタイルを作成することにより、視覚的なアクティビティのフィードバックをさらに提供します。

:focusを使用したアクティブフォームフィールドの明確化

フォームに記入するときは、ユーザーが現在作業しているフィールドを知っていることが重要です。 これは、:focus疑似クラスを使用して実現できます。 デフォルトでは、ブラウザはoutlineプロパティを使用して、要素に:focusがあることを示しますが、目立たないインジケーターである場合や、デザインの他の視覚的側面と衝突する場合があります。 このセクションでは、フォームの美観に一致するカスタム:focus状態を作成します。

フォームフィールド:focusの状態の操作を開始するには、テキストエディタでstyles.cssを開きます。 次のコードブロックで強調表示されているように、input、select、およびtextareaのグループセレクターを、すべて:focus疑似クラスで作成します。

styles.css 

...
input,
select,
textarea {
  ...
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px hsl(213, 90%, 70%);
}

input[type="text"],
input[type="email"],
select,
textarea {
  ...
}
...

これらのスタイルは、ブラウザのデフォルトのoutline値を削除し、スタイルをbox-shadowプロパティで作成された太い青いストロークに置き換えます。 box-shadowの最初の3つの値は、シャドウの配置とブラーの量です。 4番目はスプレッドと呼ばれ、この場合、フォーカスされた要素の周りに4pxストロークを作成します。

次に、submitボタンは同じ青色であるため、ボタンはわずかに異なるフォーカス状態を受け取ります。 フォーカス状態の目的と目的は、フォーカスされた要素に注目を集めることです。そのため、これらのアウトラインをさまざまな方法で区別します。

button:focusセレクターをstyles.cssに追加します。 セレクターブロックで、outlineのデフォルトを無効にし、box-shadowプロパティを追加します。 配置、ぼかし、および広がりの値は入力フィールドと同じままですが、次のコードブロックで強調表示されているように、色は青ではなく黒になります。

styles.css 

...
button {
  ...
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 4px black;
}

button[type="submit"] {
  ...
}
...

変更内容をstyles.cssに保存し、ブラウザに戻ります。 index.htmlを更新し、 Tab キーを押して、フォーム内の各要素間でフォーカスを移動します。 次のアニメーションは、Tabキーでフォーカスが変化するときにフォーカススタイルがどのように適用されるかを示しています。

このセクションでは、フォーム要素にフォーカスがある場合に明確な視覚的フィードバックを提供するフォーカス状態スタイルを作成しました。 この視覚的なスタイルは、マウス、タッチ、およびキーボード入力のユーザーに役立ちます。

結論

フォームはウェブデザインの一般的な要素です。 これにより、ユーザーはアプリを操作したり、コンテンツを検索したり、フィードバックを提供したりできます。 このチュートリアルでは、本格的なフォームを作成してスタイルを設定しました。 appearanceプロパティを使用してブラウザのデフォルトのスタイルを削除し、さまざまな要素にわたって新しいカスタムの美学を作成しました。 :checked疑似クラスを使用して、ラジオボタンとチェックボックスの状態を選択しました。 次に、placeholderコンテンツを追加し、スタイルを::placeholder疑似要素と一致させました。 カスタムボタンスタイルを作成した後、:focusスタイルを適用して、フォームユーザーに貴重な視覚的相互作用のフィードバックを提供しました。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。

「https://www.finddevguides.com/index.php?title=CSSで一般的なフォーム要素のスタイルを設定する方法&oldid=102612」から取得
Powered by MediaWiki