Comment styliser une case à cocher pour qu'elle ressemble à un bouton avec un effet de survol ?

Style d'une case à cocher pour qu'elle ressemble à un bouton avec effet de survol

La création d'éléments d'interface utilisateur de style personnalisé peut améliorer l'expérience utilisateur. Dans ce cas, vous souhaitez remplacer une case à cocher par une apparence semblable à un bouton et, en outre, vous souhaitez implémenter un effet de survol pour améliorer l'interaction.

La structure HTML :

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

Les styles CSS :

Pour styliser la case à cocher en bouton et implémenter l'effet de survol, vous pouvez utiliser le CSS suivant :

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

Style de survol :

La clé pour ajouter l'effet de survol est le CSS suivant :

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

Ceci spécifie que lorsque l'utilisateur survole la case à cocher de style bouton , l'arrière-plan deviendra rouge.

Exemple en direct :

Voir l'exemple en direct dans le violon suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!