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

getdocs

2年前

序章

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

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

前提条件

高度なセレクターを使用して、CSSを使用してスタイルを検索してHTML要素に適用した経験。詳細については、 CSS チュートリアルでID、クラス、および属性セレクターを使用してHTML要素を選択する方法を確認してください。
CSSチュートリアルでボックスモデルを操作する方法にあるCSSボックスモデルの知識。
CSSの疑似クラスに精通していること。紹介については、CSSで状態疑似クラスでリンクとボタンを使用する方法を確認してください。
ローカルマシンに次のように保存された空のHTMLファイル index.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> エレメント。 The <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;
}

The body そしてその main 要素セレクターは、ページ全体の初期テキストスタイルとレイアウトを作成します。 The form 要素セレクターは、フォームコンテナー全体のスタイルを作成し、同じサイズの2つの列で構成されるCSSグリッドを定義します。 grid-template-columns: 1fr 1fr;. そうして 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;
}

The 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 ブラウザで。 The appearance 次の画像に示すように、プロパティは装飾されたスタイルを削除し、よりシンプルなスタイルになりました。

The 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 白い背景と丸みを帯びた角とともに、各データ入力要素の周りの濃い灰色の境界線。

次に、内部にテキストを含むデータ入力要素にスタイルを適用します。属性セレクターを使用して、 input それらに基づいてターゲットとする要素 type 属性値。次のコードブロックで強調表示されている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;
}

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

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

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

戻る styles.css を追加します textarea 要素セレクター。セレクターブロック内に、 min-height の値に設定されたプロパティ 10rem. これにより、フォームユーザーがテキストを入力するためのより大きな初期領域が作成されます。次のコードブロックで強調表示されている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、次にブラウザに戻ってページを更新します。 The <textarea> 現在、元の高さの約2倍であり、 <select> 要素には、右側に青い下向きの矢印があります。次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

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

ラジオボタンとチェックボックスのカスタマイズ `:checked` 疑似クラス

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

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

styles.css

...
select {
  ...
}

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

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

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

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

ラジオボタンまたはチェックボックスを操作すると、何も表示されません。 The 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)
  );
}

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

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

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

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

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

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

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

stlyes.css

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

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

The 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 開いて index.html Webブラウザで。次の画像に示すように、データ入力フィールドの上のラベルテキストは大きく太字になります。

戻る 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;
}
...

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

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

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

プレースホルダーコンテンツの提供 `::placeholder` 疑似要素

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

プレースホルダーコンテンツの作成を開始するには、 index.html テキストエディタで。追加する placeholder 名前テキストの属性 <input />、 Eメール <input />、そしてその <textarea> 要素。次のコードブロックで強調表示されている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="name@example.com" />
  </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、2つのボタンがあり、1つには type の submit と他の reset. どちらも機能的には便利ですが、反対のアクションを実行します。 The 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;
}

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

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

次に、に戻ります styles.css 各ボタンにスタイルを追加するには type それぞれを対象とする属性セレクターを使用します。のために submit ボタン、青を追加 background-color と white テキストの色。 The 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 テキストエディタで。 The submit ボタンは目立つ青と白になりましたが、 reset 次の画像に表示されているように、下線付きのテキストは控えめです。

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

作成するには :hover これらの州 <button> 要素、に戻る 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 財産。の最初の3つの値 box-shadow 影の配置とぼかしの量です。 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のスタイルを設定する方法の他のチュートリアルを試してください。