CSS カスタム チェックボックス ボタン style-green checkbox_html/css_WEB-ITnose

HTML に付属するチェック ボックスやラジオ ボタンのスタイルは、場合によっては独自のテーマ スタイルと一致させる必要がある場合がありました。これを実装するには JS を使用する必要があります。これで、CSS も必要な効果を完全に実現できます。

まず最初に思い浮かぶのは、チェック ボックスに背景色が必要であるということです。ここではチェック ボックスの選択状態を表す複雑な要素です。HTML では単純にチェック ボックス全体を表現できます。 CSSコードもシンプルです

<div class="i-check">       <input type="checkbox" value="0" />       <label></label></div>

チェックボックスのサイズはブラウザの中央に表示するためにここで設定します。チェックボックスのデフォルト値を設定します。ステータスはラベルを使用して設定されます。その高さと幅は .i-check の設定と同じです。次に、背景色を指定し、その位置を設定します。 > デフォルトのステータスはすでに修正されています。この時点で必要なのは、選択された状態です。先ほど述べたように、選択された状態は疑似クラスを使用して設定します。 、境界線を設定し、その後を回転させて、チェック マークになります。ただし、デフォルトのステータス チェック マークは非表示になっているため、不透明度 0 を使用します。

.i-check {    width: 20px;    height: 20px;    position: relative;    margin: 20px auto;}

OK、全体。ステータスが設定されたら、次のコードを完成させます。チェックボックスをクリックすることを忘れないでください。ユーザーがボックスをクリックできるようにするには、ボックスの高さと幅が全体のサイズと同じである必要があります。これにより、ユーザーはボックス全体のどこでもクリックできるようになります。 OK、最後のステップは入力チェックボックスを非表示にすることですが、実際に非表示にするのではなく、ここで非表示にする必要があるのは、不透明度を使用して 0 に設定することです。

これで全体のエフェクトが完成しました。 同様に、ラジオボタンのエフェクトも設定できます。

 .i-check label {    width: 20px;    height: 20px;    cursor: pointer;    position: absolute;    top: 0;    left: 0;    background: #1A9909;    border-radius: 4px;}

.i-check  label:after {    content: '';    width: 9px;    height: 5px;    position: absolute;    top: 4px;    left: 4px;    border: 3px solid #fff;    border-top: none;    border-right: none;    background: transparent;    opacity: 0;    transform: rotate(-45deg);}

この記事は以下のものです。 Wu Tongwei のブログ、

WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233

転載する場合は出典と対応するリンクを明記してください: http ://www.wutongwei.com/front/infor_showone.tweb?id=218。 、皆さんも拡散・シェア大歓迎です

.i-check input[type=checkbox]:checked + label:after {    opacity: 1;}

.i-check input[type=checkbox] {    opacity: 0;    position: absolute;    z-index: 2;    left: 0;    top: 0;    width: 100%;    height: 100%;    margin: 0;}