CSS を使用して緑色のチェックボックス ボタンのスタイルをカスタマイズする

この記事では主に CSS のカスタムの緑色のチェック ボックス ボタンのスタイルを紹介します。これは、必要な友達に参考にしていただけると思います。

HTML 独自のチェック ボックスまたはラジオ ボタンのスタイルは比較的シンプルです。場合によっては、これらのフォーム コントロールを独自のテーマ スタイルに合わせる必要がある場合があります。これまでは、CSS を使用して目的の効果を実現できました。

まず本題に移りますが、チェック ボックスには背景色が必要であり、次にチェック ボックスの選択状態を表現するために使用します。 HTMLは

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

.i-checkを全体として単純に表現できます。追加されたCSSコードも簡単です

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

チェックボックスのサイズは、ここで中央に表示されるように設定されます。

次に、チェックボックスのデフォルトの状態を設定します。ここでは、その高さと幅を.i-checkの設定と同じにします。

その位置を設定します。

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

デフォルトの状態はすでに修正されています。この時点で必要なのは、選択された状態です。ここでは、後の疑似クラスを使用します。 set とその境界線を設定し、これを回転させるとチェック マークになります。ただし、デフォルトの状態のチェック マークは非表示になっているため、不透明度 0 を使用します。

.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);   
}

さて、全体の状態を設定する必要があります。チェック ボックスをクリックします。時間が来たらチェック マークを表示します。次のコードを完成させます。

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

ユーザーがクリックできるように、入力チェック ボックスのスタイルを設定することを忘れないでください。 、その高さと幅は全体のサイズと同じでなければなりません。これにより、ユーザーはこの領域のどこでもクリックできるようになります。最後のステップは、入力チェックボックスを非表示にすることです。この場合、非表示にするために必要なのは、不透明度を 0 に設定することです。

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

これで、全体の効果は完了です。同様に、ラジオボタンの効果も設定できます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS を使用して、ブラウザーがズームしても背景画像のサイズが変わらないコードを実装する 2 つの方法

CSS の設定方法 テキストのフォントの色

CSS画像の下の隙間の問題を解決する方法

以上がCSS を使用して緑色のチェックボックス ボタンのスタイルをカスタマイズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。