Changer l'image du bouton radio quand on clique avec css

Question

J'ai créé un bouton radio css en suivant les conseils sur le stackoverflow, mais il manque un petit détail.

Il imprime un carré rouge au lieu de l'icône du bouton radio par défaut, mais lorsque je clique dessus, rien ne se passe.

Il y a le code: Dans la boucle, j'ai:

$radioprint[$j] .= '<div class="radio"><div><input type="radio" name="radio'.$j.'" value="'.$radioarr[$j][$r].'"> 
<label for="radio'.$j.'"></label>'.$radioarr[$j][$r].'</div></div>'; 

Et j'ajuste le css:

input[type=radio]{display:none;} 
label { 
width: 14px;height: 14px;display: inline-block;background-color: red;cursor: pointer; 
} 
input[type=radio]:checked + label { 
width: 14px;height: 14px;display: inline-block;background-color: green;cursor: pointer; 
} 

Answer 1

ont essayé une solution de contournement avec CSS seulement pour le faire fonctionner (utilisé 3 radios à tester, vous pouvez le faire à partir de la boucle).

HTML:

<input class="rb" value="1" id="a1" type="radio" name="myradio" checked="checked"> 
<label for="a1" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 1</span></label><br /> 

<input class="rb" value="2" id="a2" type="radio" name="myradio"> 
<label for="a2" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 2</span></label><br /> 

<input class="rb" value="3" id="a3" type="radio" name="myradio"> 
<label for="a3" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 3</span></label> 

CSS:

.rb { display:none } 
.new_button {width:15px; display:inline-block} 
.whitespan { background-color: white } 
.radio_label { background-color:red; cursor: pointer } 
input[type=radio]:checked+label { background-color: green } 

Ok, laissez-moi vous expliquer comment cela fonctionne. Il y a 3 boutons radio cachés cachés avec display:none. L'étiquette de chacun des boutons radio contient div élément (pour simuler le dessin personnalisé des cercles) et le texte du cours. J'ai placé le texte à l'intérieur de la paire et j'ai changé son arrière-plan en blanc (ou n'importe quelle couleur de fond que vous voulez). Après avoir cliqué sur label, vous changez la couleur d'arrière-plan du libellé entier, mais le fond blanc de votre texte le rend visuellement inchangé. Cela signifie que vous pouvez changer la zone colorée de l'étiquette simplement en changeant les dimensions de l'en-ligne div devant le texte. Parce que div a été placé à l'intérieur de la paire label, vous pouvez obtenir le même effet de clic en cliquant sur des carrés de couleur aussi.

En fait, avec la propriété de style width de l'étiquette, vous pouvez définir la largeur du bloc coloré. Pour changer la hauteur, vous devrez probablement faire face à margins, padding, font-size, ou même en rendant complexe la structure des éléments div nested. Honnêtement, c'était ma première tentative pour faire quelque chose comme ça. Jamais utilisé quelque chose de similaire dans ma vie. Donc, ce n'est certainement pas une solution parfaite, mais au moins y réfléchir et essayer de faire quelque chose d'utilisable pour répondre à vos besoins.

J'espère que vous pouvez l'utiliser.