Définissez l'image personnalisée sur la case à cocher sans étiquette obligatoire - html, css, checkbox

J'ai un projet où parfois les cases à cocher n'ont pas d'étiquettes. La seule façon de définir une image personnalisée pour la case à cocher que j'ai trouvée était de définir l'image pour label:before pour correspondant label qui a for valeur avec id de la case à cocher.

Existe-t-il un moyen CSS (au moins hacky) de définir une image personnalisée sur la case à cocher sans modifier le balisage? input[type="checkbox"]:before fonctionne uniquement dans Chrome.

Réponses:

Le seul moyen que j'ai trouvé qui fonctionne partout sauf IE pour le bureau (même dans Edge) est de définir CSS appearance:

input[type="checkbox"] {
width: 16px;
height: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: red;
}

input[type="checkbox"]:checked {
background-color: green;
}

<input type="checkbox" />

Je pense qu'il est impossible de le faire sans étiquette pour tous les navigateurs. À mon avis, l'étiquette est nécessairement.

Mais vous pouvez utiliser JS pour cela et une bibliothèque comme je vérifie (et beaucoup d'autres non seulement jQuery aussi JS pur)

Peut-être que si vous ajoutez un conteneur à votre case à cocher comme celui-ci

<div>
<input type="checkbox">
</div>

et alors

div{
position: relative;
/* Your custom style */
}

input{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0;
}