28112 sujets

CSS et mise en forme, CSS3

[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 Smiley smile
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 Smiley smile

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,

Merci de ta réponse.

J'ai essayé d'englober les input dans une div.
Les tabs ne fonctionnent plus.

Aussi, dans mon cas, j'aimerais que les labels soient dans la div.
En effet, j'ai besoin qu'ils soient dans une div afin d'appliquer des colonnes.

En les englobant dans une div, je pense que le ciblage CSS n'est plus bon mais je ne vois pas comment résoudre ce problème.

https://codepen.io/anon/pen/eQYqbO
Modifié par MickFR (05 Nov 2018 - 11:49)
aliasdmc,

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