on:2020年2月21日sponsorsモダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。いった実装はできないものと思っていたので、驚きました。Features下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。入力フォームの完成モダンCSSの機能を使用した入力フォーム最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボックス・ラジオボタン・トグルスイッチなどを実装することができます。追加のHTMLやJavaScriptは一切必要ありません。以前より簡単になったその実装方法を解説します。完成した入力フォームをご覧ください。カラーやエフェクトなど自由にスタイルを適用できます。CodePen.実装は以前より簡単になりました簡単になった理由は、<input>タグに::beforeや::afterの疑似要素でスタイル設定ができるからです。<input>に対してスタイルを定義できるため、余分な要素は必要ありません。imgなど)には利用できないと思っていたのですが、けっこう前から動作するようです。none;」をサポートしていれば、動作するそうです。Firefoxには期待通り適用され、非サポートのIEではプログレッシブエンハンスメントでデフォルトのスタイルが適用されます。仕様では確認できない実装方法のため、こういうこともできるんだと頭の片隅に入れておくくらいがよいかもしれません。HTMLは非常にシンプル注意すべき点は何もありません。下記のHTMLだけで入力フォームのスタイルを適用できます。class="switch">最低限のHTMLは上記で終わりですが、もちろん<label>要素を加えて、name属性とid属性を定義することをお勧めします。none;のサポートをチェックします(プレフィックス付きで)。appearanceプロパティは、要素からブラウザのデフォルトのスタイルを削除するものです。プロパティがサポートされていない場合はスタイルは適用されず、デフォルトのスタイルが適用されます。これは全く問題なく、プログレッシブエンハンスメントの良い使用例です。none;}}2020年現在、appearanceプロパティをサポートするブラウザは下記の通りです。Uselink要素と同じように、フォーム要素にもさまざまなインタラクティブな状態をスタイルするためのステータスがあります。フォーム要素をスタイルする時にはこれらを考慮しましょう。:checked:hover:focus:disabled例えば、トグルスイッチのスタイルを定義し、ノブを作成し、:checked状態をスタイルする時は下記のようにします。.6;}<input>要素をコンテナのように使用しています。入力の内側のノブは::after疑似要素で作成します。繰り返しになりますが、余分はHTMLは必要ありません!デモでスタイルを開いてみると、CSSのカスタムプロパティが定義されているのが分かると思います。これは再利用可能な値を管理するための便利な方法です。#E1E6F9;}}カスタムプロパティを使用しているのには、もう1つ理由があります。要素のステータスに基づいて値を更新する場合にも有効です。ここでは詳しく触れませんが、さまざまなステータスでカスタムプロパティを使用する例をいくつか紹介します。チェックされておらず無効な場合、ホバー時にボーダーを別のカラーにします。チェックされておらず無効な場合、ホバー時にボーダーを別のカラーにします。var(--border-hover);}アクセシビリティを考慮して、フォームにスタイルを追加する必要があります。デフォルトのoutlineは他のスタイルのように丸くできないため、一旦削除します。その後、box-shadowに沿ったborder-radiusを使用して、outlineのように機能する丸みのあるスタイルにできます。var(--focus);}また、<input>要素のすぐ後に続く<label>要素の位置合わせとスタイル設定も可能です。not-allowed;}入力フォームの完成これで完成です。CodePen.フォームのカスタムスタイルを作成することの素晴らしさを実感されたと思います。入力フォームに直接疑似要素を使用できるおかげで、最小限のHTMLで実装できます。カスタムプロパティのおかげで、凝ったスタイルの切り替えも必要ありません。@supportsのおかげで、ブラウザのサポートもかなり優れています。Posts関連記事が見つかりませんでした。