純粋な CSS を使用してラジオと checkbox_html/css_WEB-ITnose を美しくする

ラジオとチェックボックスを美化する必要がありますか?もちろん、何百年も変わらないオリジナルのスタイルではお客様のニーズに応えることはできません。フォーム内の多くのコントロールは美化するために Javascript を使用しますが、一部のコントロールは CSS を直接使用して美化する必要があります。今日は、純粋な CSS を使用してラジオとチェックボックスを美化する方法を紹介します。

デモのダウンロード ソース コードを表示します

JS を使用してフォーム コントロールを美しくする方法の多くは、js と css を導入する必要があり、jQuery に依存するものもあります。複雑でメンテナンス性が悪い。

magic-check を使用する

magic-check は、チェックボックスとラジオフォームを美しくするために数十行の CSS コードのみを使用します。まずはcssファイルを読み込みます。

次に、CSS クラスの magic-checkbox または magic-radio を input 要素に追加するだけです。

ラジオ

<link rel="stylesheet" type="text/css" href="magic-check.css">

Checkbox

<input class="magic-radio" type="radio" name="radio" id="r1"><label for="r1">Normal</label>

注意深い友人は、パッケージ化されダウンロードできる CSS コードを参照してください。 CSS はチェックボックスとラジオを非表示にし、:before と :after の位置決めを使用してチェックボックスとラジオの外観を再描画して美しい効果を実現し、IE9+ をサポートします。