チェックボックスとラジオボタンは、1つ前の記事のファイル入力 (input[type=”file”]要素) と同様に、ブラウザ毎にデザインが決まっていて、CSSでデザインすることができない要素です。
今回は、このチェックボックスとラジオボタンのデザインをCSSで変更する方法をご紹介します。コピペで使用できるHTMLコードとCSSコードを併記しています。
CSSとJSでHTMLフォームのファイル入力を柔軟にデザインする方法
HTMLのフォームコントロール要素 (input要素, button要素, select要素, textarea要素, etc…) には、ブラウザ毎に異なったデザインが適用されていて、全てのブラウザで共通のデザインを適用するのは、割とハードルが高めです。
特に、ファイル入力 (input[type=”file”]) は柔軟にデザインするのが困難です。今回はJSを使用してファイル入力を柔軟にデザインする方法をご紹介します。
CSSセレクタの優先順位を自由自在に上げる方法
CSSは簡単なようで難しいです。設定した覚えのないスタイルが適用されているっていうのはウェブサイト制作者なら誰でも経験があるはず。CSS設計をきちんとしていれば起こりづらくはなるのですが、それでも、ごくまれに「あれっ、おかしい」ってなります。
そんなときに役立つ、CSSセレクタの優先順位を自由自在に上げる方法をご紹介します。
Microdataのスコープを参考にしたCSS設計・命名規則
Microdataの構造を参考にしたCSS設計・命名規則、名付けて「S2CSS」を紹介します。