arms-nakamura https://blog.hatena.ne.jp/arms-nakamura/ arms inc. Engineers' Blog https://tech.arms-soft.co.jp/ CSS フロントエンド こんにちは、ナカムラです。 先日、inputタグのチェックボックスとラジオボタン自体をCSSで装飾できないか？ という質問をいただいたのでこの記事で紹介したいと思います。 フォームでよく使われるチェックボックスやラジオボタンの装飾方法は、labelやspanなどで選択肢のテキストを囲み、チェックボックスやラジオボタンであるinputタグをdisplay:none;にします。 inputのcheckedの状態によって見た目を変える必要があるため、必ずinputタグの次にラベル要素を置く必要があります。 ※:has()が使えるようになると不要になりますが、実務で使うのはもう少し先の話になりそうです… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.arms-soft.co.jp%2Fentry%2F2023%2F10%2F18%2F090000" title="チェックボックスとラジオボタンのタグ自体を装飾するCSS - arms inc. Engineers&#39; Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/a/arms-nakamura/20231016/20231016142000.jpg Hatena Blog https://hatena.blog 2023-10-18 09:00:00 rich https://tech.arms-soft.co.jp/entry/2023/10/18/090000 1.0 100%