CODEWITHSUNDEEP
javascripthtmlcssforms
user1436111
user1436111

Reputation: 2141

Any way to make HTML disabled checkbox darker?

I'm using javascript to disable a checkbox:

       $('#test').attr("disabled", "true");

but I'd like to make the background of the disabled checkbox darker, because as it is it's hard to tell that it is disabled. Is there any way to do this using HTML/CSS/JS>

Upvotes: 2

Views: 12303

Answers (3)

uınbɐɥs
uınbɐɥs

Reputation: 7341

You could try wrapping the checkbox in a container div, and use input:disabled CSS rules like this: jsFiddle example.

I have tested this in the latest Windows versions of Internet Explorer, Firefox, Chrome, Opera, and Safari.

Upvotes: 1

MultiDev
MultiDev

Reputation: 10649

You can specify a CSS style for disabled input form elements like so:

input[disabled]{
 color:#666 !important; // Whatever styling here...
 opacity: .3;
}

Upvotes: 0

sandradev
sandradev

Reputation: 355

Not easily. The way the checkbox is rendered is determined by the browser. You would have to replace it with a custom JavaScritpt based solution to give it a custom rendering, but that brings other problems.

What you could do though is make disabled checkboxes a bit more transparent:

  select[disabled] { opacity: .5 }

this works in IE >= 9 and all other major browsers.

Upvotes: 5

Related Questions