[Résolu] Label checked

Bonjour,

Je rencontre une petite difficulté.

Pour un projet, j'aimerais que le label checked soit en bleu (background-color) et que l'autre label soit en gris (non sélectionné).

Je pensais que cela fonctionnerait :

.tabs .boutons input[type=radio] + label {
  display: inline-block;
  padding: 10px 50px;
    color: white;
  background: #195cdd;
}

input[type=radio]:checked + label {
  cdisplay: inline-block;
  padding: 10px 50px;
    color: white;
  background: #CCC;
}

https://codepen.io/anon/pen/dQyRgP

Auriez-vous une piste à me donner ?

Merci

jai trouver ca si ça peux aidé

/* ne cible <a> que lorsqu'il est activé */
/* par exemple quand on clique dessus */
a:active {
color: red;
}

Faisons simple

.tabs .boutons input[type=radio] + label {
  display: inline-block;
  padding: 10px 50px;
    color: white;
  background-color: #195cdd;
}

.tabs .boutons input[type=radio]:ckeched + label {
  background-color: #CCC;
}

Quel intérêt de même "display: inline-block" ? pas de largeur ?

Bonjour,

Merci de vos messages et de votre aide

Wollsale, j'ai regardé ta démo et le lien vers le cours des sélecteurs CSS.

J'ai une structure de tabs qui fonctionne bien.
Toutefois, lorsque j'englobe les "label et input" dans une div, le contenu à afficher disparaît.

Je pense que c'est un problème de sélecteur (~).

Pour mon projet, cette partie doit être englobée dans une div :

<input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Un</label>

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

Est-ce possible en ciblant comme il faut ?

https://codepen.io/anon/pen/eQYqbO

Mille mercis.

Bonjour MickFR,
Tes checkbox étant cachées du peux les mettre où tu veux.
Il te suffit de les déplacer.

 </div>
<input id="tab2" type="radio" name="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<section id="content1">

Bonjour MickFR,
C'est cela que tu désires?
https://codepen.io/Zonecss/pen/zMvooO

aliasdmc,

Merci pour la démo. C'est bien le résultat que je souhaitais obtenir
Modifié par MickFR (09 Nov 2018 - 13:23)