Personnaliser des INPUT type="radio"

**pas30** · 19/11/2020, 02h45

Je travaille sur un jeu de pronostic sportif gratuit et je propose aux joueurs de choisir pour un match entre 3 valeurs "1" "N" ou "2"
J'utilise donc des input radio (3) qui porte le même nom car l'utilisateur ne pourra en choisir qu'un.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<td>
<div class="text-center"><input type="radio" name="radio1" value="1"></div>
</td>
<td>
<div class="text-center"><input type="radio" name="radio1" value="N" checked></div>
</td>
<td>
<div class="text-center"><input type="radio" name="radio1" value="2"></div>
</td>

J'aimerais changer l'apparence habituel de ces boutons radios pour faire comme sur mon application mobile ci-dessous :

Les radios sélectionnés passent en fond rouge et texte blanc alors que les autres non sélectionnés sont sur fond blanc et texte rouge.

Nom : grille.png
Affichages : 757
Taille : 49,3 Ko

Nom : grille.png
Affichages : 757
Taille : 49,3 Ko

**oooopppp** · 19/11/2020, 09h15

Salut,
il faut que tu passes par javascript pour faire cela,
tu n'y arrivera pas en CSS pur, encore avec d'autre inputs et avant placer une balise

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<label for="myInput">Clique ici</label>
<input name="myInput" type="radio" value="1">

( je crois que si tu cliques sur le label, ça peut cocher l'input, mais avec les différents navigateurs il faut se méfier ...)
Mais là je vois pas trop comment se passer de JS ...
Crdlt,

**NoSmoking** · 19/11/2020, 17h23

Bonjour,

il faut que tu passes par javascript pour faire cela,
tu n'y arrivera pas en CSS pur,

c'est tout à fait réalisable en CSS pur en respectant une certaine structure et en utilisant le sélecteur de frère adjacent + (plus).

Structure HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="radio" name="radio[0]" value="1"><label>1</label>

Règle CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input:checked + label {
  color: #F00;
}

Si l'<input> est coché le texte du <label> qui suit sera rouge ou bien d'autre chose encore pour le personnaliser.

L'idée pour réaliser le schéma demandé et de masquer l'<input> mais que celui-ci reçoive quand même le clic. Pour cela on peut simplement lui appliquer une opacity:0 qui le masque mais le laisse actif.

Ensuite il faut supprimer l'espace que celui-ci occupe et on peut s'en sortir simplement en le positionnant avec une position: absolute, il viendra se superposer avec le <label> qui le suit. Le reste ne devrait être que cosmétique.

En partant du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <p class="row">
    <span class="equipe">Equipe #1</span>
    <span class="radio"><input type="radio" name="radio[0]" value="1"><label>1</label></span>
    <span class="radio"><input type="radio" name="radio[0]" value="N"><label>N</label></span>
    <span class="radio"><input type="radio" name="radio[0]" value="2"><label>2</label></span>
    <span class="equipe">Equipe #2</span>
  </p>
  <p class="row">
    <span class="equipe">Equipe #3</span>
    <span class="radio"><input type="radio" name="radio[1]" value="1"><label>1</label></span>
    <span class="radio"><input type="radio" name="radio[1]" value="N"><label>N</label></span>
    <span class="radio"><input type="radio" name="radio[1]" value="2"><label>2</label></span>
    <span class="equipe">Equipe #4</span>
  </p>
  <p class="row">
    <span class="equipe">Equipe #5</span>
    <span class="radio"><input type="radio" name="radio[2]" value="1"><label>1</label></span>
    <span class="radio"><input type="radio" name="radio[2]" value="N"><label>N</label></span>
    <span class="radio"><input type="radio" name="radio[2]" value="2"><label>2</label></span>
    <span class="equipe">Equipe #6</span>
  </p>
  <!-- la suite -->

Nota : le name des <input> sous la forme nom[index] permet de récupérer facilement les données côté serveur.

Et en appliquant le CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
p.row {
  display: flex;
  align-items: center;
  margin: 0;
  padding: .5em;
  border-bottom: 1px solid #49E;
}
span.equipe {
  font-size: 1.5em;
  padding: 0 1em;
}
span.radio {
  display: inline-block;
  position: relative;
  width: 2em;
  height: 2em;
  margin: 0 .25em;
  font-size: 1.5em;
  line-height: 2em;
}
span.radio input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  opacity: 0;
  cursor: pointer;
}
span.radio label {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 2px solid #F00;
  border-radius: .25em;
  text-align: center;
  font-size: .8em;
  font-weight: 700;
  color: #F00;
  background-color: #FFF;
}
span.radio input:checked + label {
  color: #FFF;
  background-color: #F00;
}

... on ne doit pas être très loin de la vérité.

Il y a effectivement de cosmétique, ce qui est quand même une raison d'être du CSS

**pas30** · 19/11/2020, 20h41

C'est pas super au point je pense qu'il doit avoir une autre solution plus propre :

Voila le résultat : https://www.fortune-island.com/lotosport.php?id=2

Des fois faut cliquer 3,4 fois et c'est le texte dedans n'est pas centré

La solution est peut-être là : https://juliencrego.com/astuces/pers...kbox-avec-css/

Leur cas RADIO 2 pourrait correspondre à ce que je cherche peut-être

**NoSmoking** · 19/11/2020, 21h26

C'est pas super au point je pense qu'il doit avoir une autre solution plus propre :

est ce que tu as testé avec la structure HTML que j'ai fourni ?

Pour l'appliquer à ton modèle il te faut simplement

1/ VIRER le margin-left sur les input

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    /* margin-left: -20px; */
    margin-top: 4px \9;
}

2/ VIRER le padding-left sur les <label>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.radio label, .checkbox label {
    min-height: 20px;
    /* padding-left: 20px; */
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

Tu les sors d'où ces valeurs !?!

**pas30** · 20/11/2020, 02h52

J'ai finalement utilisé une autre méthode et ça marche du tonnerre je partage la solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
 
input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
  color: #FF0000;
  background-color: #FFFFFF;
  border: 1px solid transparent;
  border-color: #FF0000;
  transition: all 0.15s ease-in-out;
}
 
input[type="radio"].demoyes:checked + label {
  color: #FFFFFF;
  background-color: #FF0000;
  border-color: #FF0000;
}
 
</style>

Et après juste ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<td>
<div class="text-center"><input type="radio" class="demoyes" name="<?php echo $nameradio;?>" id="<?php echo $namelabela;?>" value="1"><label for="<?php echo $namelabela;?>">1</label></div>
</td>
<td>
<div class="text-center"><input type="radio" class="demoyes" name="<?php echo $nameradio;?>" id="<?php echo $namelabelb;?>" value="N" checked><label for="<?php echo $namelabelb;?>">N</label></div>
</td>
<td>
<div class="text-center"><input type="radio" class="demoyes" name="<?php echo $nameradio;?>" id="<?php echo $namelabelc;?>" value="2"><label for="<?php echo $namelabelc;?>">2</label></div>
</td>

**javatwister** · 20/11/2020, 12h15

En reprenant les préconisations de NoSmoking, c'est simple; illustration sans design, juste pour le principe:
http://javatwist.imingo.net/systemeNS.htm

**javatwister** · 20/11/2020, 12h17

pas30, en mettant tes radio en display:none, tu risques d'avoir du mal à les transmettre au serveur...

**NoSmoking** · 22/11/2020, 10h03

Envoyé par javatwister

tu risques d'avoir du mal à les transmettre au serveur...

les value des éléments en display:none seront transmissent si elles existent bien sûr.

Le plus gros désavantage du display:none est que l'accessibilité est réduite, adieu l'utilisation des touches de direction et de la tabulation, ce qui reste dommage sur PC et pour certaines personnes dont je fais partie.