HTML - image à la place d'une case à cocher

Résolu/Fermé

spylller Messages postés 395 Date d'inscription dimanche 1 mars 2015 Statut Membre Dernière intervention 11 juillet 2019 - 21 janv. 2017 à 18:01
spylller Messages postés 395 Date d'inscription dimanche 1 mars 2015 Statut Membre Dernière intervention 11 juillet 2019 - 21 janv. 2017 à 19:20

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 ;)

A voir également:

1 réponse

Réponse 1 / 1

spylller Messages postés 395 Date d'inscription dimanche 1 mars 2015 Statut Membre Dernière intervention 11 juillet 2019 28
21 janv. 2017 à 19:20

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;
}

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Cocher un case sur Word

URGENT - codes ALT + ???

A quoi correspond cette croix sur snapchat

Placement PARIS BERCY

Discussions similaires

Newsletters