純粋な CSS_html/css_WEB-ITnose でラジオとチェックボックスを美しくする

ラジオとチェックボックスを美化する必要がありますか?答えは「はい」です。なぜなら、デザインスタイルは常に変化し、元のスタイルが何百年も変わらないままであれば、間違いなくニーズを満たすことができないからです。

まず、純粋な CSS: View で美化した後のラジオとチェックボックスの効果を見てみましょう。

プロジェクトアドレス: magic-check

CSS が登場する前は、ラジオやチェックボックスを美しくするために JavaScript が必要でした。最も代表的なのは、強力で複雑な機能と多くのテーマを備えた icheck です。 icheck のような美化ソリューションは非常に優れており強力ですが、多くの欠点もあります。

• 重すぎる、JS、CSS、画像、またはフォント アイコンを導入する必要があり、また jQuery に依存する

• スケーラビリティが低い、純粋な js プロジェクトもOK、Angular.js、React、Vue.js、または Meteor プロジェクトの場合は、通常、icheck のラッパーを自分で作成する必要があります

• スタイルはあまりカスタマイズ可能ではなく、できるのはスタイルを変更した場合は図を再作成してください

• イベントの動作はネイティブの不一致に従います

• 保守性と複雑さが低く、誰が使用するかは誰にも分かりません

したがって、プロジェクトが Antique と互換性がある必要がない場合は、ブラウザの場合は、CSS を使用してラジオとチェックボックスを美しくするのが最良の選択です。これにより、CSS のみを使用し、JS、画像、フォント アイコンを使用する必要がなくなります。

プロジェクト内で再利用しやすくするために、美化されたコードを magic-check というプロジェクトに書きました。これは、ラジオとチェックボックスを魔法のように美しくすることを意味します。

使用法は非常に簡単で、管理には Bower と npm を使用するのが最善です。

• 次に、CSS ファイルをロードします:

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

  ログイン後にコピー
  次に、CSS クラスの magic-checkbox または magic-radio を入力要素に追加します:
• Radio

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

  ログイン後にコピー
  Checkbox

<input class="magic-checkbox" type="checkbox" name="layout" id="1"> <label for="1">Normal</label>

ログイン後にコピー