文字をハイライト化するスイッチを作ろう

問題10：文字をハイライト化するスイッチを作ろう

チェックボックスと文字を横に並べて
チェックボックスにチェックが入ったら文字のボーダーを
蛍光ペンのようなハイライトカラーで塗ってみよう。

見本を参考に実装してください。

期待する画面

解答ソースコード

              <input id="text" type="checkbox">
<label for="text">チェックしたらこの文字をハイライトにしてください</label>
¥HTML¥

              input:checked + label{
    background: linear-gradient(transparent 70%, yellow 0);
  }
¥CSS¥

解説

チェックボックス + テキストパターンの実装をする際は
inputタグとlabelタグをしっかりと連結させる癖をつけましょう。

チェックボックスがcheckdになった時のセレクタの指定は
input:checked のように指定することができます。
そうすることで、チェックボックスにチェックがついてる時のパターンと
ついていない時のパターンが指定できます。

蛍光ペンのようなハイライトカラーをつけたい時は
linear-gradient で好きな色を合わせてみましょう。

ログインして解答を見る