web-dev-qa-db-fra.com

Changer l'image de la case à cocher en image personnalisée

J'essaie de changer l '"image de boîte" par défaut de la case à cocher avec CSS, mais cela ne fonctionne pas. Y a-t-il un moyen de contourner cela?

.class_checkbox{
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}

<input type="checkbox" class="class_checkbox">
htmlcssxhtml
32
themis

Essayer:

<input type="checkbox" class="input_class_checkbox">

jQuery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

Violon: http://jsfiddle.net/cn6kn/

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
.class_checkbox {
    width: 20px;  
    height: 20px;
    background-color: red;
}
.class_checkbox.checked {
    background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">
12
iambriansreed

Vous pouvez utiliser du css pur, ajoutez simplement une étiquette à la case à cocher comme ceci:

.check_box {
    display:none;
}

.check_box + label{
    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.check_box:checked + label{
    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Exemple HTML:

    .check_box {
        display:none;
    }

    .check_box + label{
        background:url('images/check-box.png') no-repeat;
        height: 16px;
        width: 16px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

    .check_box:checked + label{
        background:url('images/check-box-checked.png') no-repeat;
        height: 16px;
        width: 16px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">
87
ali mokrani

J'ai créé un Fiddle en utilisant du CSS pur. La réponse la plus votée ne gère pas les événements de clic et ne fonctionnera pas bien, car la valeur de la case à cocher ne changera pas.

Voici mon exemple:

http://jsfiddle.net/kEHGN/1/

Fondamentalement, nous avons besoin du code HTML suivant:

<div class="checkbox_wrapper">
    <input type="checkbox" />
    <label></label>
</div>

Et le CSS suivant:

.checkbox_wrapper{
    position: relative;
    height: 16px;
    width: 17px;
}

input[type="checkbox"] {
    opacity:0;
    height: 16px;
    width: 17px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

input[type="checkbox"] + label{
    background:url('../images/unchecked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

input[type="checkbox"]:checked + label{
    background:url('../images/checked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Il suffit de vérifier les itinéraires des images, et les largeurs et hauteurs doivent être égales à la largeur et la hauteur des images. Sur le violoneux, j'utilise des images encodées en base64.

J'espère que cela peut être utile.

7
Tony

J'ai trouvé un autre moyen, sans utiliser d'étiquettes adjacentes ou de divs environnants.

Mon cas d'utilisation était que j'avais un analyseur de démarque qui génère ces astucieuses listes TODO et je voulais les styliser. Changer le code HTML généré n'était pas une option, j'ai donc trouvé cette solution:

étant donné une case à cocher comme celle-ci:

<input type="checkbox" id="cb">

Vous pouvez le coiffer avec visibility: hidden sur la case à cocher et visibility: visible on :: after, comme ceci:

#cb {
  visibility: hidden;
}

input#cb::after {
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;
}

input#cb:checked::after {
  content: " T ";
  color: green;
  background: red;
}
<!doctype html>
<html>

<body>
  <input type="checkbox" id="cb">
</body>

</html>

MODIFIER:

@connexo dans un commentaire a souligné que les éléments d'entrée ne peuvent pas avoir de contenu. Cela pourrait être facilement fait en utilisant l'élément label, par exemple comme ça (veuillez corriger quelqu'un si c'est faux, je n'ai pas de navigateur non-webkit à portée de main pour le tester).

#cb-span * {
  visibility: hidden;
}

input#cb + label::after {
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;
}

input#cb:checked + label::after {
  content: " T ";
  color: green;
  background: red;
}
<!doctype html>
<html>

<body>
  <span id="cb-span">
    <input type="checkbox" id="cb">
    <label for="cb"></label>
  </span>
</body>

</html>

La case à cocher fonctionne comme une normale et vous pouvez la personnaliser comme bon vous semble.

Peut-être que cela aidera quelque chose (et je peux le mettre en signet, car je n'ai rien trouvé de tel sur le Web)

3
Enbyted

Peut-être sera utile mon échantillon avec MOINS.

<div class="custom-checkbox">
    <input component="input" type="checkbox"/>
    <label>Here is caption right to checkbox</label>
</div>

    @imgsize: 25px;
    .custom-checkbox{
        position: relative;

        > input[type="checkbox"] {

        display:none;
        position: absolute;
        top: 0;
        left: 0;

            + label{

                background:url('../img/unchecked.png') no-repeat 0 0;
                background-size:@imgsize;
                height: @imgsize;
                padding: 4px 0 5px 35px;
                display: inline-block;
                -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s;
                transition-duration: 0.3s;        
            }
        }
        > input[type="checkbox"]:checked + label{

            background:url('../img/checked.png') no-repeat;
            background-size:@imgsize @imgsize;
        }
    }
1
Sergei Ryzhov