Mettre en surbrillance les cases à cocher et les boutons radio en utilisant jQuery.

Question

J'ai du mal à mettre en évidence les cases à cocher et les boutons radio qui ont été sélectionnés. Faire .css("border", "1px solid red") ou .css("background-color", "yellow") ne semble pas fonctionner.

À part la coche par défaut ou le bouton radio rempli, j'ai besoin d'un moyen d'identifier que ces cases à cocher ou boutons radio ont été cliqués en le mettant en surbrillance d'une manière ou d'une autre.

exemples HTML

<input type="radio" title="search" value="T" name="srchType"> 
<input type="checkbox" value="1" name="option1"> 

Answer 1

Si vous souhaitez conserver l'apparence navigateur par défaut des cases à cocher, il n'y a pas trop vous pouvez faire avec le style CSS. L'apparence de case à cocher non standard n'est pas obtenue avec la couleur de bordure ou de fond, mais avec un remplacement en gros avec de nouveaux graphiques représentant les différents états (voir here et here, par exemple). Toutefois, en fonction de la structure de votre code HTML, vous pouvez obtenir un effet agréable avec des css réguliers. Par exemple, si quelque chose comme ceci:

<label> 
<input id="cb1" name="cb1" type="checkbox" value="1" /> 
My Checkbox 
</label> 

Vous pouvez appliquer un style comme celui-ci:

$('input:checkbox').click(function(){ 
    $(this).parent('label').toggleClass('highlight', this.checked); 
}); 

... avec comme celui-ci css:

label { display: block; } 
.highlight { background-color: yellow; } 

Voici un exemple: http://jsfiddle.net/redler/c3hDK/1/

Answer 2

S'il vous plaît cliquer sur ce lien, il a toutes les infos

change checkbox border color

Answer 3

Filament Group a également un article que vous pourriez trouver utile. http://filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/