CSS を使用して緑色のチェックボックスボタンのスタイルをカスタマイズする-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-12 09:51:37

オリジナル

2700 人が閲覧しました

この記事では主に 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: &#39;&#39;;   
    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 サイトをご覧ください。