Dev Faq
11
votes

Comment puis-je activer un style CSS pour une étiquette lorsque vous planifiez sur la case à cocher associée?

Chaque fois que je passe sur l'étiquette d'une case à cocher, il tourne le jaune:

MARKUP H3> 
label:hover, label:active {
   background:yellow;
}

0 commentaires

4 Réponses :

19
votes

Vous pouvez utiliser un sélecteur de sodiblon CSS, comme celui-ci: xxx

Notez que cela ne fonctionnera pas dans IE6.

6 commentaires

Ce ne sera-ce pas agréable lorsque la part de marché IE6 est suffisamment petite, nous pouvons arrêter de s'inquiéter de ce qui ne fonctionne pas? C'est jusqu'à 7,2%. Voir W3schools.com/browersers/browsers_stats.asp

J'ai arrêté de soutenir IE 6 il y a 5 ans! :)

deuxième question!!! Est-il possible de mettre en surbrillance l'étiquette si la case à cocher est cliquée / sélectionnée? Ce serait intéressant!

Vous voulez dire si c'est vérifié, mais pas si c'est décoché? Vous ne pouvez pas faire ça sans JavaScript

Gérer le Modifier Evénement, appelez VAL () , et ajoutez ou supprimez la classe comme approximation ( $ (this) .AddClass ("...") < / code>)

@MatHireGister: En fait, Vous pouvez utiliser le pseudo-classe coché Tout comme vous utilisez déjà: HOVER et: actif ... Sauf que cela ne fonctionnera pas dans une version actuellement libérée de IE ...

6
votes

Il suffit de mettre la case à cocher à l'intérieur l'étiquette: xxx

Maintenant, lorsque vous survolez la case à cocher, vous aurez également surgi l'étiquette et votre existant Les règles suffiront à la mettre en valeur.

1 commentaires

@ Walterj89: En effet, c'est ... En fait, vous pouvez ignorer l'attribut pour sur l'étiquette lorsque l'entrée associée est imbriquée dans!

2
votes

la solution de jQuery: xxx

et cela fonctionne dans IE6.

0 commentaires
0
votes 
/*CSS*/
/*-------------------------------------------------*/
input:not(:checked) + label:hover{
  color: #d51e22;
  cursor: pointer;
  background-color: #bbb;
}

input:checked + label[for="tab1"],
input:checked + label[for="tab2"],
input:checked + label[for="tab3"],
input:checked + label[for="tab4"]{
 color: #d51e22;
 text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
 background-color: #000;
}

label[for="tab1"],[for="tab2"],[for="tab3"],[for="tab4"] {
  width:24%;
  display: inline-block;
  margin: 0 0 -1px;
  padding: 25px 25px;
  font-weight: 600;
  font-size:24px;
  text-align: center;
  border-radius:15px;
  background-color: #d51e22;
  color: #fff;
  /*border: 1px solid transparent;*/
}

/*HTML*/
/*-------------------------------------------------*/
<input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Text here</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Text here</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Text here</label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">Text here</label>
0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor