26907 sujets

CSS et mise en forme, CSS3

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 ?
Salut MickFr,

ton erreur dans ton code est assez simple.

L'idée est de cibler un label lorsqu'un input est ":checked".
Pour ça, tu utilise ce sélecteur :
input[type=radio]:ckeched + label { ... }
or le sélecteur "+" signifie "cible le label qui suit directement" (voir la doc sur les sélecteurs de voisin direct).

Pour régler ton problème, je te propose de réorganiser ton HTML de manière à ce que ton label suive directement l'input correspondant. J'ai reproduis la situation dans ce codepen en réorganisant simplement l'HTML : https://tinyurl.com/y8auo2mr

En espérant que ça débloque ton problème Smiley smile
Modifié par Wollsale (03 Nov 2018 - 17:35)
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)