Bagaimana Menggayakan Kotak Semak untuk Kelihatan Seperti Butang dengan Kesan Hover?

Menggayakan Kotak Pilihan agar Kelihatan Seperti Butang dengan Kesan Tuding

Mencipta elemen UI tersuai boleh meningkatkan pengalaman pengguna. Dalam kes ini, anda ingin menggantikan kotak pilihan dengan penampilan seperti butang, dan sebagai tambahan, anda ingin melaksanakan kesan tuding untuk meningkatkan interaksi.

Struktur HTML:

<code class="html"><div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div></code>

Gaya CSS:

Untuk menggayakan kotak pilihan sebagai butang dan melaksanakan kesan tuding, anda boleh menggunakan CSS berikut:

<code class="css">div label input {
   margin-right:100px;
}

body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

#ck-button:hover {
    background:red;
}</code>

Penggayaan Tuding:

Kunci untuk menambah kesan tuding ialah CSS berikut:

<code class="css">#ck-button:hover {
    background:red;
}</code>

Ini menentukan bahawa apabila pengguna menuding pada kotak pilihan gaya butang , latar belakang akan bertukar kepada merah.

Contoh Langsung:

Lihat contoh langsung dalam biola berikut:

http://jsfiddle. net/zAFND/4/

Atas ialah kandungan terperinci Bagaimana Menggayakan Kotak Semak untuk Kelihatan Seperti Butang dengan Kesan Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!