あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方

フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム

[ryoraspp]

“CSS framework Hi-Qは、チェックボックス、ラジオボタン、無効化されたinput要素など、フォーム入力のための便利な基本スタイルを提供するフレームワークです。 ”

[teru-7]

css3

[anton072]

知らない要素がたくさんあった