J'ai une label
avec "for="the pointer to the checkbox input"
" et tant que je sache, cette for
ne peut être ajoutée que pour label
. Par conséquent, je dois ajouter dans la label
un <button>
(j'en ai besoin), mais l'événement click ne fonctionne pas correctement. Il ne coche pas la case à cocher sur laquelle pointe la for
.
Quelles sont les possibilités que je peux utiliser ici si je dois placer <button>
dans label
, avec seulement html + css coding?
du code par exemple:
<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>
Il s'avère que vous pouvez obliger un <button>
à exploiter une entrée, mais uniquement si vous mettez le <label>
dans le <button>
.
<button type="button">
<label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">
Bien que cela contrevienne aux spécifications du W3C:
L'étiquette d'élément interactif ne doit pas apparaître comme un descendant de l'élément button . https://www.w3.org/TR/html-markup/label.html
Vous pouvez utiliser un pseudo-élément transparent qui recouvre la case à cocher et le bouton lui-même qui interceptera les événements de la souris.
Voici un exemple:
html:
<label>
<input type="checkbox">
<button class="disable">button</button>
</label>
css:
.disable{pointer-events:fill}
label{position:relative}
label:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
background: transparent;
top:0;
left:0;
right:0;
bottom:0;
}
La meilleure solution est que le style ressemble à un bouton.
Si vous utilisez un framework CSS, tel que bootstrap, vous pouvez donner aux classes d'étiquettes telles que btn et btn-default. Cela ressemblera à un bouton. Vous devrez peut-être ajuster manuellement la propriété css de la hauteur de ligne comme ceci:
label.btn {
line-height: 1.75em;
}
Ensuite, pour obtenir les styles de clic sous forme de bouton, ajoutez ces styles:
input[type=radio]:checked ~ label.btn {
background-color: #e6e6e6;
border-color: #adadad;
color: #333;
}
Cela prendra l'entrée qui est cochée et donnera le prochain élément label dans le dom qui a la classe btn, bootstrap les styles cliqués par le bouton btn-default. Ajustez les couleurs comme vous le souhaitez.
HTML:
<label for="whatev"
onclick="onClickHandler">
<button>Imma button, I prevent things</button>
</label>
JS:
const onClickHandler = (e) => {
if(e.target!==e.currentTarget) e.currentTarget.click()
}
La cible est la cible du clic, currentTarget est le libellé dans ce cas.
Sans la déclaration if, l'événement est déclenché deux fois si l'utilisateur clique à l'extérieur de la zone empêchant les événements.
Pas croisé navigateur testé.