Personnaliser [ input type= »checkbox » ]

Posted on par baltazorius
css

<input> éléments de type checkbox sont rendus par défaut sous forme de cases qui sont cochées lorsqu’elles sont activées, comme vous pourriez le voir dans un formulaire. L’apparence exacte dépend de la configuration du système d’exploitation sous lequel le navigateur s’exécute. Généralement, il s’agit d’un carré, mais il peut avoir des coins arrondis. Une case à cocher vous permet de sélectionner des valeurs uniques à soumettre dans un formulaire (ou non).

Démo d’un checkbox : 
<html>
  <head>
	<style type="text/css">
p,
label {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: 0.4rem;
}
	</style>
  </head>
<body>
<fieldset>
    <legend>Démo d'un checkbox :</legend>

    <div>
      <input type="checkbox" id="scales" name="scales" checked>
      <label for="scales">Scales</label>
    </div>

    <div>
      <input type="checkbox" id="horns" name="horns">
      <label for="horns">Horns</label>
    </div>
</fieldset>
</body>
</html>
Démo couleur modifier d’un checkbox : 
<html>
  <head>
	<style type="text/css">
p,
label {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: 0.4rem;
    accent-color:#2c7c72;
}
	</style>
  </head>
<body>
<fieldset>
    <legend>Démo d'un checkbox :</legend>

    <div>
      <input type="checkbox" id="scales" name="scales" checked>
      <label for="scales">Scales</label>
    </div>

    <div>
      <input type="checkbox" id="horns" name="horns">
      <label for="horns">Horns</label>
    </div>
</fieldset>
</body>
</html>
Démo d’un checkbox et label colorés une fois la case cochées: 
<html>
  <head>
	<style type="text/css">
    #check {
      margin-right: 6px;
    }
    label {
      font-weight: 500;
      color: #333;
      cursor: pointer;
    }
    #check:checked {
      accent-color: #7d2ae8;
    }
    #check:checked ~ label {
      color: #7d2ae8
    }
	</style>
  </head>
<body>
<fieldset>
    <legend>Démo d'un checkbox et label colorés une fois la case cochées:</legend>

<input type="checkbox" id="check" />
<label for="check">Checkbox</label>

</fieldset>
</body>
</html>

Views: 311