HTML - image à la place d'une case à cocher [Résolu/Fermé]

Signaler
Messages postés
387
Date d'inscription
dimanche 1 mars 2015
Statut
Membre
Dernière intervention
11 juillet 2019
-
Messages postés
387
Date d'inscription
dimanche 1 mars 2015
Statut
Membre
Dernière intervention
11 juillet 2019
-
Bonjour,
Je souhaiterais mettre le choix des langues sous forme de drapeau, qu'on puisse cliquer sur un seul, et que cela marche comme des zones d'options. Mais je trouve pas comment faire.
Merci de votre aide ;)

1 réponse

Messages postés
387
Date d'inscription
dimanche 1 mars 2015
Statut
Membre
Dernière intervention
11 juillet 2019
22
J'ai trouvé un petit tuto anglais qui m'a aidé.

<div class="case">
                    <input class="casex" type="radio" name="pays" value="fr" id="fr"/>
                    <label for="fr" style="background-image: url('images/fr.png');"></label>
                  </div>
                    <br/>


                  <div class="case">
                    <input class="casex" type="radio" name="pays" value="ang" id="ang"/>
                    <label for="ang" style="background-image: url('images/ang.png');"></label>
                  </div>
                  <br/>



.case
{
	width: 164px;
	height: 84px;
	background-color: #2e2e2e;
	position: relative;
	margin:0;
}

.case input[type="radio"]
{
	visibility: hidden;
}

.case label
{
	width: 160px;
	height: 80px;
	position: absolute;
	left: 2px;
	top:2px;	
	background-size: 100%;
}

.case label:before
{
	content:'';
	width: 160px;
	height: 80px;
	background-color: gray;
	position: absolute;
	opacity: 0.4;
}

.case input[type="radio"]:checked + label:before
{
	opacity: 0;
}