how to style checkbox using jquery?

Question

I am styling check-box in HTML using Jquery, but its not appearing in the browser . when i checked the browser element property it is showing the style has applied to the element but its not showing in the browser . This is my Jquery code

$("form :checkbox:checked").css("border", "3px solid green");

I am using jquery version 2.2.2, I have checked 1.9.1,1.10,1.12 all are failing and I am using Firefox version 45 and chrome version 49.x . here is the Jsfiddle version of this code source code in jsfiddle

Do you need something like this https://jsfiddle.net/o93f3za6/4/ or this https://jsfiddle.net/o93f3za6/5/ ?? — Pugazh, Apr 05 '16 at 06:27
You cannot customize default checkbox. To do, [refer this](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) — Gibbs, Apr 05 '16 at 06:28
i appreciate you answer and i know its works that way , is it my code version is old or deprecated ? — , Apr 05 '16 at 06:34

score 1 · Accepted Answer · answered Apr 05 '16 at 06:31

1

Try using outline instead of border, like this:

$("document").ready(function(){
  $('form input:checkbox:checked').css("outline", "3px solid red");
})

fiddle: https://jsfiddle.net/rdawkins/36ccvk4h/7/

answered Apr 05 '16 at 06:31

thanks man that worked. border is the problem and its worked with outline. – Apr 05 '16 at 06:39
Glad I could help :) – Apr 05 '16 at 06:39

score 0 · Answer 2 · answered Apr 05 '16 at 06:41

0

try this

$( "form input:checkbox:checked" )
  .wrap( "<span></span>" )
  .parent()
  .css({
    border: "3px red solid"
  });

https://jsfiddle.net

answered Apr 05 '16 at 06:41

B.P

171
7

how to style checkbox using jquery?

2 Answers2