3
votes

Comment activer une case à cocher lorsqu'un lien est cliqué?

J'essaie de faire un hack de case à cocher assez simple dans un e-mail HTML pour créer des informations de base interactivité des e-mails.

Quelque chose comme ce qui suit:

<style>
  input:checked + a {
    text-decoration: line-through;
  }
</style>
<label>
  <input type="checkbox" style="display:none"/>
  <a href="http://www.google.com" target="_blank">Open Google</a>
</label>

À chaque fois que l'on clique sur l'élément à faire, je peux appliquer un style en le marquant terminé.

Mais si je transforme l'élément à faire en lien:

<style>
  input:checked + div {
    text-decoration: line-through;
  }
</style>
<label>
  <input type="checkbox" style="display:none"/>
  <div>A todo item</div>
</label>

La case n'est pas cochée lorsque le lien est cliqué.

Voici un codepen pour démontrer .

Existe-t-il un moyen d'obtenir le lien à ouvrir et la case à cocher pour basculer? Comme cela est destiné à un e-mail HTML, toute solution javascript est hors de propos.

html css

2 commentaires

C'est parce que le clic sur une étiquette annule le clic sur l'étiquette d'étiquette

Une balise interactive imbriquée dans une autre balise interactive annule le comportement de l'autre et vice versa.

3 Réponses :

1
votes

MODIFIER

Comme pour le courrier électronique et que vous ne pouvez pas utiliser JS, ajoutez simplement un tabindex à une balise et un css . C'est le plus proche que vous pouvez obtenir sans utiliser javascript

Démo de travail ci-dessous :

<label>
  <input type="checkbox" style="display:none"/>
  <div>Todo Item</div>
</label>
<label>
  <input type="checkbox" style="display:none"/>
  <div>Another todo Item</div>
</label>
<label>
  <input type="checkbox" style="display:none" id='btnControl'/>
  <a href="http://www.google.com" target="_blank" id='link' tabindex="0">Open Google</a>
</label>

label {
  display: block;
  padding: 10px 0;
}
input:checked + div{
  text-decoration: line-through;
}

a:focus{
text-decoration: line-through;outline:0;}

4 commentaires

Cela fonctionnerait, mais comme il s'agit d'un e-mail html, je ne peux pas utiliser javascript.

Vous avez raison sur le sélecteur CSS, je vais changer mon exemple pour qu'il corresponde.

@nicholas édité, c'est le plus proche que vous puissiez obtenir sans utiliser javascript :)

Utiliser la concentration est un génie, mais ce n'est pas persistant, donc ne fonctionnera pas dans ce cas. Dès que vous cliquez sur le lien suivant, vous perdez le focus et le barré disparaît.

-1
votes

  <label>
  <input type="checkbox" style="display:none"/>
  <a href="http://www.google.com" id="me" onclick="myFunction()" target="_blank">Open 
  Google</a>
  </label>

HTML

 function myFunction() {
  document.getElementById("me").style.textDecoration = "line-through";
 }

1 commentaires

Ça marcherait. Mais comme c'est pour un email HTML, je ne peux pas utiliser de javascript. J'ai mis à jour ma question pour que cela soit plus clair.

1
votes

La réponse est: vous ne pouvez pas sans JS. Cette configuration HTML crée des contenus interactifs imbriqués. Le fait est que la balise reçoit l'événement de clic et cela annule le clic sur l'étiquette. Vous avez besoin de JS! De cette façon, le comportement naturel de la case à cocher n'est pas modifié, c'est-à-dire que vous pouvez décocher:

<style>
	input:checked+a {
           text-decoration: line-through;
	}
</style>

<label for="myInput">
  <input id="myInput" type="checkbox" style="display:none"/>
  <a href="http://www.google.com" onclick="myInput.click()" target="_blank"> Open Google</a>
</label>

Démonstration fonctionnelle

0 commentaires