Discussion :

[LuffyBoy_85]

Bonjour à tous,
après de nombreuse recherches sur les forums anglais, et après avoir essayé toutes le solutions, je voulais trouvé ma réponse.
donc voilà, je fait un formulaire et là je suis confronté à changer la couleur du fond d'un bouton de type 'radio'. Pour celà j'ai essayé d'abord ça:

Code html :

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

1
2
3
4
<input type= "radio" name="acceuil" style="background-color:#00B720">
<input type= "radio" name="acceuil" style="background-color:#0DFF00">
<input type= "radio" name="acceuil" style="background-color:#FFC900">
<input type= "radio" name="acceuil" style="background-color:#FF0000">

et j'ai aussi essayé ça:

CSS:

Code css :

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
.vertTS{
	color: #fff;
	background-color: #00B720;
}
.vertS{
	color: #fff;
	background-color: #0DFF00;
}
.orangeMS{
	color: #fff;
	background-color: #FFC900;
}
.rougeI{
	color: #fff;
	background-color: #FF0000;
}

et HTML:

Code html :

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

1
2
3
4
<input type= "radio" class="vertTS" name="acceuil">
<input type= "radio" class="vertS" name="acceuil">
<input type= "radio" class="orangeMS" name="acceuil">
<input type= "radio" class="rougeI" name="acceuil">

mais toujours le même résultat, la couleur n'apparait pas. :/
Merci de votre aide en tout cas!

[Bisûnûrs]

C'est tout simplement impossible. Il va falloir que tu passes par un simulateur de boutons radio, mais pas les vrais boutons radio.

Au passage, on écrit accueil et pas acceuil.

[LuffyBoy_85]

Bonjour,
Je présume qu'il est aussi impossible de changer la couleur du petit rond une fois le radio selectionné?
cordialement.

[Bisûnûrs]

Exactement.

[Bovino]

Personnalisez vos formulaires HTML.

[CCyrillus]

Bonjour,

plutôt pour le fun qu'une reelle option: http://codepen.io/gc-nomade/pen/wEoKr

L'idée est de reproduire le radio en stylant son label associé et de posé au dessus un masque opaque coloré.
le radio peut ensuite être mis en absolute et ejecté du viewport avec left:-9999px;

Infos:display:none; pour cacher un input est une mauvaise pratique et certains navigateur le garderont ou le remettront à l'écran sitôt qu'il prendra le focus pour des raisons d'accessibilités

[LuffyBoy_85]

Bonjour,
Justement Cyrillus, j'ai trouver ce site (http://codepen.io/vsync/pen/jChFa) et du coup, je voulais savoir quelque chose.
Lorsque j'ouvre mon formulaire avec Google, le resultats est très moche, tout est décalé etc... Alors qu'avec Firefox, tout est normal.. Est-ce normal? Est se que ton code "display:none;" servirai à déjouer celà?
Merci d'avance.