チェックボックスとラジオボタンは、1つ前の記事のファイル入力 (input[type=”file”]要素) と同様に、ブラウザ毎にデザインが決まっていて、CSSでデザインすることができない要素です。
今回は、このチェックボックスとラジオボタンのデザインをCSSで変更する方法をご紹介します。コピペで使用できるHTMLコードとCSSコードを併記しています。
2019年7月
CSSとJSでHTMLフォームのファイル入力を柔軟にデザインする方法
HTMLのフォームコントロール要素 (input要素, button要素, select要素, textarea要素, etc…) には、ブラウザ毎に異なったデザインが適用されていて、全てのブラウザで共通のデザインを適用するのは、割とハードルが高めです。
特に、ファイル入力 (input[type=”file”]) は柔軟にデザインするのが困難です。今回はJSを使用してファイル入力を柔軟にデザインする方法をご紹介します。