CSSを使ったlabel要素のカスタマイズを徹底解説！inputとの紐づけ方も紹介

「label要素のCSSが思い通りにいかない」「labelとinputの紐づけがうまく効かない」

そんな悩みを抱えていませんか？

label要素は、他の要素と比べると少し特殊で、難しそうに感じますよね。

今回は、label要素についてCSSでカスタマイズする方法を習得したい、という方のために

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSカスタマイズをメインにlabel要素について深く学習できるようになりますよ。

ぜひ最後まで読んでくださいね！

label要素とは？役割を解説

そもそも、label要素とは、どんな特徴があり、どんな場所で使用するのでしょうか？

label要素は、input要素やtextarea要素などの入力欄に対して、項目名を付けて説明するために使用します。

具体的には、下記のように記述します。

<label>名前を入力する</label>
<input type="text" name="name">

項目名はテキストだけでなく画像も使用でき、主に入力内容をユーザーに伝えるために利用されます。

label要素は、input要素やtextarea要素と紐づけることができ、これにより、label要素の項目部分をクリックしても、入力欄にフォーカスが当たるようになります。

「label要素の画像使用」と「入力欄との紐づけ」について、それぞれ説明していきますね。

label要素に画像を使用

<label>
<img src="sample.png" width="35" height="35">投票する
</label>
<input type="checkbox" name="example">

label要素にはテキスト以外にも、img要素を使った画像なども入れることができます。

この後で説明する紐づけを行うことで、画像をクリックしても入力欄がフォーカスされるようになります。

label要素の紐づけ方について

label要素は入力欄と紐づけすることができます。

紐づけされた入力欄は、label要素の方をクリックしても、入力欄にフォーカスが当たります。

入力がチェックボタンやラジオボタンだった場合、label要素部分をクリックすることでチェックのつけ外しが行われます。

スマホでタップしずらいチェックボタンでは、この機能はありがたいですよね。

それでは、label要素の紐づけ方について、3つの項目で詳しく説明していきましょう。

labelの中にinputを入れて紐づけ

label要素の紐づけ方には2通りの方法があります。

1つ目は、label要素の中に項目名部分とinput要素を含めてしまう方法です。

ただし、この方法は、IE6以前のブラウザでは非対応となっていますので、特別な理由がない限り、2つ目で説明する方法を使った方が良いでしょう。

<label>
  <div>名前：</div>
  <input type="name" name="name">
</label>

上記のように記述すると、項目名と入力欄が紐づけされた形になります。

「label for」と「input id」で紐づけ

2つ目の紐づけ方法は、「label要素のfor属性」と「input要素のid属性」に同じ値を指定する方法です

<label for="name">名前を入力</label>
<input type="text" id="name">

上記のように記述することで、両者が紐づけされます。

label要素と入力欄が遠く離れていても、問題なく動作します。

for属性とid属性を逆に書いてしまわないように、注意しましょう。

1つの入力欄に複数のlabelを紐づけ

1つの入力欄に複数のlabel要素を紐づけさせることができます。

<label for="example1">1つ目の項目名</label>
<label for="example1">2つ目の項目名</label>
<input type="checkbox" id="example1">

上記のように、for属性とid属性をきちんと指定すると、どちらをクリックしても入力欄にフォーカスが当たるようになります。

label要素をCSSでカスタマイズ

続いて、label要素をCSSでカスタマイズする方法を解説していきます。

label要素にCSSが効かないときの対処法などは、ページの下の方でまとめていますので、そちらもご覧ください。

CSSでのカスタマイズについて、以下の4つを説明していきます。

label要素と入力欄を縦並びに

label要素と入力欄のinput要素はインライン要素となりますので、そのままでは横並びに表示されます。

縦並びにするには、CSSで「display: block」と指定します。

label {
  display: block; 
}
input{
  display: block; 
}

また、CSSを使わずにdiv要素で囲ってしまう方法もあります。

<div>
<label for="name">名前：</label>
</div>
<div>
<input type="text" id="name">
</div>

チェックボックスを縦並びにしたいときにも便利な方法ですね。

<div>
<label for="example1">A</label>
<input type="checkbox" id="example1" name="question">
</div>
<div>
<label for="example2">B</label>
<input type="checkbox" id="example2" name="question">
</div>
<div>
<label for="example3">C</label>
<input type="checkbox" id="example3" name="question">
</div>

label要素のサイズを変更

インライン要素は、高さと横幅のサイズ指定ができません。

サイズを変更したい場合にも、先ほどの「display: block」を使用します。

label {
  display: block;
  width: 140px;
  height: 50px;
  margin: 10px;
  padding: 7px 10px;
  background: #ccc;
}

ブロックレベル要素にすることで、「margin」と「padding」を使い、外側と内側の余白の指定もできるようになります。

ちなみに、input要素もインライン要素ですが、置換インライン要素に分類されるため、ブロックレベルに変更することなく高さと横幅の指定が可能です。

ボタン風のデザインにカスタマイズ

CSSを使ってカスタマイズすれば、label要素をボタンのように表示をさせることも可能です。

以下に1例を紹介します。

<label class="label-btn" for="like">いいね！</label>
<input type="checkbox" id="like">

CSSは以下のように記述します。

.label-btn{
  display: inline-block;
  padding: 10px 15px;
  background-color: #7fbfff;
  cursor: pointer;
  border-radius: 3px;
  border: 0;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
}

.label-btn:hover{
  opacity: 0.7;
}

これにより、label要素の部分がボタンのような表示になりました。

マウスをホバーすることでボタンの色が薄くなり、クリックすると、チェックボタンが選択されます。

属性セレクタにCSSスタイルを適用

特定のlabel要素にのみCSSを適用したい場合、属性セレクタを使うことがあります。

<label for="mail">メールアドレス入力</label>

上記のような要素に対して、属性を指定してスタイルを適用することができます。

label[for="mail"] {
  display: inline-block;
  width: 170px;
  color: #fff;
  background: #ff8484
}

nameなど、他の属性を指定することもできます。

label要素に含むことができない要素

label要素の中には、span要素やimg要素など、様々な要素を入れることができます。

ただし、要素によっては含むことが推奨されないものもあるので注意しましょう。

クリックできる要素は入れない

label要素の中に、クリック可能なa要素やbutton要素などを入れない方が良いでしょう。

クリック可能な要素を含んでしまうと、label要素と入力欄の紐づけがうまく機能しなくなります。

label要素内で、a要素やbutton要素を使う場面は、ほとんどないと思いますが、覚えておきましょう。

label要素を入れ子にしない

label要素の中に別のlabelを入れることはできません。

また、紐づけしている入力欄以外の紐づけ可能な要素を入れることも禁止されています。

見出しタグを含まない

label要素の中に<h1>や<h2>など、見出しを示す要素を入れることができません。

これは、アクセシビリティの観点から、そうなっています。

視覚障害のある方が利用する読み上げソフトには、見出しをナビゲーションとして使用しているものがあります。

ページ内容を素早く把握するために、見出しから見出しへジャンプする機能もあります。

label要素にも、入力欄を説明する役割があります。

別々の役割がある要素を入れ子にしてしまうと、読み上げソフトの支援が正しく機能しない可能性があるので注意が必要です。

label要素への指定が効かないときの原因と修正方法

label要素にCSSなどをきちんと指定したつもりでも、想定通りに動かないことがあります。

ここでは、label要素に指定したものがうまく動作しないときの対処法を紹介します。

label要素にCSSが効かない

label要素に対してCSSが効かないときの対処法を紹介します。

高さや横幅などのサイズ指定だった場合、「display:block」または「display: inline-block」と指定することで解決することが多いです。

label要素はインライン要素ですので、そのままではサイズの指定ができません。

余白を指定するmargin、paddingも一部機能しないため、これらを指定したい場合にもブロックレベル要素に変更しましょう。

CSSで「:checked」が効かない

「:checked」はinput要素のチェックボックスがチェックされていたり、入力されている状態を表します。

例として、label要素をクリックし、チェックが入ったときにlabel要素のスタイルが変更する処理を書いていきます。

<input type="checkbox" name="checkbox" id="check">
<label for="check">ここをチェック</label>

input:checked + label {
  color: red;
}

上記コードでは、チェックが入ると項目名が赤くなります。

CSSで指定した「:checked」が効かない場合、inputタグの中にcheckedをつけて確認してみてください。

<input type="checkbox" name="checkbox" id="check" checked>

checkedをつけると、初めからチェックがついている状態になります。

これでも想定通りのスタイル（赤い文字）にならなかった場合、CSSの記述が間違っているかもしれません。

特にセレクタの書き方には注意が必要です。CSSセレクタの「+」は、隣接セレクタといい、その直後の要素を示します。

今回の例では、input要素のすぐ下のlabel要素が当てはまります。

あまり使わない方法なので、きちんと指定できているか確認した方が良いですね。

2つの要素の位置も重要となるので、HTMLの記述も見直しましょう。

また、「input :checked」のように、「:checked」の前に空白を入れるのも間違いです。

想定通りの結果になった場合には、チェックのつけ外しで変化するか確認してみましょう。

最後に、inputタグの中のcheckedを削除して、機能するか試してみてください。

label要素の紐づけが効かない

前述のとおり、label要素と入力欄を紐づけすることができます。

これが機能しない場合、以下の3つの項目を確認してみましょう。

labelにはfor属性、inputにはid属性を指定しているか

<!-- 駄目な例 -->
<label id="sample">入力してください</label>
<input type="text" for="sample" name="name">

2つの要素の属性が間違っていると、紐づけが行われません。

特に、id属性とfor属性を逆に書いてしまうミスには気を付けましょう。

2つの属性に同じ値を指定しているか

<!-- 駄目な例 -->
<label for="abc">入力してください</label>
<input type="text" id="def" name="name">

2つの属性は同じ値を使う必要があります。

他の入力欄で同じ値を指定していないか

<!-- 駄目な例 -->
<label for="sample1">名前：</label><input type="text" id="sample1" name="name">
<label for="sample1">チェック</label><input type="checkbox" id="sample1" name="checkbox">

別の入力欄には、別の値を指定する必要があります。

ただし、1つの入力欄に対して、複数のlabel要素を紐づけることは可能です。

まとめ：label要素にはCSSカスタマイズは必須

今回は、label要素と、label要素を使う上で必須となるCSSについて解説してきました。

label要素がない状態でも入力欄は問題なく機能しますが、サイトの利便性のために用意した方が良いでしょう。

入力をスムーズに行えるように、ユーザーに入力内容を示す役割もあります。CSSで分かりやすくデザインすることも大切です。

サイト上でフォームやアンケートなどを作成する際に、今回の記事が参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！