web-dev-qa-db-fra.com

Style Bootstrap 4 Case à cocher personnalisée

Comment puis-je styliser une case à cocher personnalisée dans Bootstrap 4? J'ai tout essayé mais je ne peux même pas changer sa couleur d'arrière-plan.

Voici mon plan de code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

Qu'est-ce que je cible ici? Quelqu'un pourrait-il simplement me montrer comment changer son arrière-plan?

Merci.

htmlcsstwitter-bootstrapbootstrap-4
9
hemoglobin
.custom-control{
  background-color: grey;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>
8
Malathy Venkatesan

Cela a fonctionné pour moi avec

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #caca4c;
}
8
manuxi

Vous deviez simplement remplacer custom-control-indicator style.

essayez comme ci-dessous

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<style>
.custom-control-input:checked~.custom-control-indicator{
color:white;
background-color:red;
}
</style>
<body>

<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>
</body>

</html>
3
xamDev

J'ai la même question que olefrank. Je souhaite utiliser une autre image. Par exemple, sur la page des formulaires de notre intranet, pour indiquer un formulaire préféré, j'aimerais que l'utilisateur sélectionne une étoile au lieu d'une case à cocher. Je l'ai fait fonctionner avec des images, mais j'ai utilisé le balisage spécifié dans la documentation Bootstrap 4:

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Et puis le css suivant:

.custom-checkbox .custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-label::after {background-image: url(five-pointed-star.svg); background-size: 100%;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {background-image: url(five-pointed-star-selected.svg); background-size: 100%;}

Mais j'aimerais savoir comment spécifier une autre image à l'aide d'une police Web, malheureusement bien au-delà de mes compétences!

0
murphyme