チェックボックスをホバー効果のあるボタンのようにスタイル設定する方法

チェックボックスをホバー効果のあるボタンのようにスタイル設定する

カスタム スタイルの 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。 net/zAFND/4/

以上がチェックボックスをホバー効果のあるボタンのようにスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。