如何將複選框設定為看起來像具有懸停效果的按鈕？

將複選框樣式設定為具有懸停效果的按鈕

建立自訂樣式的 UI 元素可以增強使用者體驗。在本例中，您希望將複選框替換為類似按鈕的外觀，此外，您希望實現懸停效果以改善互動。

HTML 結構：

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

CSS 樣式：

要將複選框樣式設為按鈕並實作框樣式懸停效果，您可以使用以下CSS：

<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>

懸停樣式：

添加懸停效果的關鍵是以下CSS：

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

這指定當使用者將滑鼠懸停在按鈕樣式的複選框上時，背景將變為紅色。

即時範例：

請參考以下小提琴中的即時範例：

http://jsfiddle.淨/zAFND/4/

以上是如何將複選框設定為看起來像具有懸停效果的按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！