web-dev-qa-db-fra.com

Bouton dans une étiquette

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>
htmlcsscss3buttonradio-button
10
nikoletta

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

7
Sinetheta

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;
}
2
eboye

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.

1
Kyle Goss

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é.

0
Jaakko Karhu