En faite c'était tout simplement un problème dans mon code html. Il suffit de mettre un attribut checked au premier bouton. Sujet résolu !

Bonjour, je viens vers vous car cela fait quelque jour que je galère pour un petit détail.

Voilà, pour un projet, je dois créer une navigation pour filtrer des portfolio. Elle n'a pas besoin d'être fonctionnel. Je dois seulement faire en sorte qu'au clic, le bouton change de couleur et prenne un background bleu et que celui précédemment sélectionné retrouve sa couleur initiale. Jusque là, pas de soucis j'ai réussi.

Mon problème est que par défault, c'est le dernier bouton de la liste qui est sélectionné, alors que je voudrais que ce soit le premier. Comment puis-je faire ? Voici mon code

<div id="production"> <!-- Navigaton permetttant de filtrer les projets -->
 <input type="radio" name="navigationPrestation" id="tousLesProjets" class="tousLesProjets" checked>
 <label for="tousLesProjets" class="tousLesProjets">Tous les projets</label>
 <input type="radio" name="navigationPrestation" id="creation" class="creation" checked>
 <label for="creation" class="creation">Création</label>
 <input type="radio" name="navigationPrestation" id="entreprise" class="entreprise" checked>
 <label for="entreprise" class="entreprise">Entreprise</label>
 <input type="radio" name="navigationPrestation" id="portfolio" class="portfolio" checked>
 <label for="portfolio" class="portfolio">Portfolio</label>
   </div>

#production
{
	display: flex;
    justify-content: center;
}

#production
{
	margin-top: 20px;
}

#production input
{
	display: none;
}

.tousLesProjets:checked ~ label.tousLesProjets,
.creation:checked ~ label.creation,
.portfolio:checked ~ label.portfolio,
.entreprise:checked ~ label.entreprise

{
	background-color: #5cadd3;
    color: #fff;
    border-bottom: 3px solid #468cad;
    padding-bottom: 8px;
}

label.tousLesProjets,
label.creation,
label.entreprise,
label.portfolio
{
	background-color: #e5e5e5;
    color: #85888B;
    position: relative;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 0.8vw;
    width: 90px;
    padding: 11px 0px;
    cursor: pointer;
}

.tousLesProjets:checked ~ label.tousLesProjets::after,
.creation:checked ~ label.creation::after,
.entreprise:checked ~ label.entreprise::after,
.portfolio:checked ~ label.portfolio::after
{
	content: "";
    display: block;
    position: absolute;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid #468cad;
    top: 100%;
    right: 37%;
}

label.tousLesProjets
{
	border-radius: 5px 0px 0px 5px;
}

label.portfolio
{
	border-radius: 0px 5px 5px 0px;
}

Merci de votre aide 

-
Edité par PierreGyn 14 novembre 2018 à 10:49:36

Salut,

enlève checked sur tout les input sauf le premier.