HTML - image à la place d'une case à cocher
Résolu
spylller
Messages postés
441
Statut
Membre
-
spylller Messages postés 441 Statut Membre -
spylller Messages postés 441 Statut Membre -
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 ;)
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:
- HTML - image à la place d'une case à cocher
- In da place - Forum Mail
- Supprimer case à cocher excel ✓ - Forum Excel
- Raccourci clavier case à cocher - Forum Clavier
- Case à cocher libre office - Forum LibreOffice / OpenOffice
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
1 réponse
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;
}