CSSで一般的なフォーム要素のスタイルを設定する方法
序章
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を追加して、ファイルの基本構造を提供します。
<!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
ファイル:
...
<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
ファイル:
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
、次のコードブロックで強調表示されているように:
...
button,
fieldset,
input,
legend,
select,
textarea {
appearance: none;
}
The appearance
プロパティは、フォーム要素から特別なスタイルを削除するための意図された方法です。 ただし、このプロパティの古さと実装により、ほとんどのブラウザでは、プロパティ名にベンダープレフィックスを追加する必要があります。 ベンダープレフィックスは、特定のブラウザーの識別子としてプロパティ名の前に付加される特別なコード化された追加です。 Chrome 、 Safari 、および最近のバージョンのEdgeとOperaの場合、そのプレフィックスは -webkit-
. Firefoxは -moz-
プレフィックス。
ベンダープレフィックスを使用する場合は、プロパティのベンダープレフィックスバージョンを最初に配置し、プレフィックスなしのバージョンで終了することが重要です。 このように、プレフィックス付きプロパティのみをサポートする古いブラウザはプレフィックスを使用しますが、プレフィックスと非プレフィックスバージョンの両方をサポートする新しいブラウザはプレフィックスなしの標準バージョンを使用します。 ハイライトされたプレフィックスを追加します appearance
次のコードブロックでフォーマットされたプロパティ:
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プロパティは、デフォルトのスタイルを削除するために必要なスタイルを追加します。
...
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
. 次のコードブロックから強調表示されたスタイルを追加します。
...
legend,
fieldset,
select,
textarea,
input,
button {
...
}
input,
select,
textarea {
border: 2px solid #333;
background-color: white;
border-radius: 0.25rem;
}
これらのスタイルは 2px
白い背景と丸みを帯びた角とともに、各データ入力要素の周りの濃い灰色の境界線。
次に、内部にテキストを含むデータ入力要素にスタイルを適用します。 属性セレクターを使用して、 input
それらに基づいてターゲットとする要素 type
属性値。 次のコードブロックで強調表示されている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は、これがどのように記述されているかを示しています。
...
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
次のコードブロックから強調表示された値を持つプロパティ:
...
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
高さと幅の値が同じになるようにします。 次に、ラジオボタンを円に変えます。 次のコードブロックの強調表示された部分は、これがどのようにフォーマットされているかを示しています。
...
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は、これがどのようにフォーマットされているかを示しています。
...
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は、これがどのように記述されているかを示しています。
...
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
、次のコードブロックで強調表示されているように:
...
<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
クラスセレクターを作成し、次のコードブロックで強調表示されているように次のプロパティを追加します。
...
.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
次のコードブロックから:
...
.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
および使用する値:
...
<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は、これがどのように記述されているかを示しています。
...
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>
次のコードブロックで強調表示されている要素:
...
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
ファイル:
...
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は、これらのスタイルの記述方法を示しています。
...
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
次のコードブロックで強調表示されている疑似クラス:
...
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
財産。 配置、ぼかし、および広がりの値は入力フィールドと同じままですが、次のコードブロックで強調表示されているように、色は青ではなく黒になります。
...
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のスタイルを設定する方法の他のチュートリアルを試してください。