Change Checkbox Color in Javascript

Question

<!DOCTYPE html>
<html>
<body>

<form action="form_action.asp" method="get">
  <span style='background-color: red;'>
    <input style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=50);" type="checkbox" name="vehicle" value="Bike" /></span>I have a bike<br />

  <span style='background-color: red;'>
    <input style="-moz-opacity:0.5" type="checkbox" name="vehicle" value="Car" /></span> I have a car <br />
  <input type="submit" value="Submit" />
</form>

<p>Click on the submit button, and the input will be sent to a page on the server called "form_action.asp".</p>

</body>
</html>

I found pieces of examples online and pieced this together the top input checkbox should work for ie and the bottom for FF and chrome. Neither on works well. IE looks sloppy and FF and chrome doesn't seem to work at all. I am trying to figure this out for a list of checkboxes, some of which are disabled based on previous choices. I have it working for most browsers but some of the browsers don't grey the boxes out.

So, I need to figure out how to grey out the boxes using javascript. This doesn't seem to work and document.getelementbyid(elementID).style.background = "#dbdbdb"; just outlines the box.

Any help is greatly appreciated

No, I have all the code to disable the button but only some browsers grey out the checkboxes when they're disabled. — user1329307
– user1329307, Commented Jun 6, 2012 at 17:04
I don't get it. What are you trying to do? Style checkboxes? Yeah, there are a zillion JS plugins for that, but it's practically impossible with pure CSS. (You might find -vendor-appearance useful. Like -webkit-appearance: checkbox.) — Rudie
– Rudie, Commented Jun 6, 2012 at 17:28
This is what I mean: jsfiddle.net/rudiedirkx/p69sc (doesn't work in Firefox, even with -moz-appearance pffffft) — Rudie
– Rudie, Commented Jun 6, 2012 at 17:32

zdebruine · Accepted Answer · 2012-06-06 17:14:24Z

1

Your checklist does not need to be clickable?

Disable it as the simple solution in some browsers, and then increase the opacity for the other browsers:

document.getElementById(elementID).disabled="disabled";
document.getElementById(elementID).style.opacity="0.5";

That's assuming your background is black... likely not.

Otherwise get the x,y position of the checkbox:

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

Then create a black div with opacity with a higher z-index and absolute positioning in front of the checkbox.

edited Jun 6, 2012 at 17:14

answered Jun 6, 2012 at 17:08

zdebruine

3,8376 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1329307 Over a year ago

Is there a cross browser way to do this? My attempt above does not work

zdebruine Over a year ago

What browser version and what browser are you using?

zdebruine Over a year ago

Check out this example: w3schools.com/css/tryit.asp?filename=trycss_transparency -- That's just approximately what I'm thinking.

Rudie Over a year ago

Don't do that... Don't position an element over another element just to change a color. Please don't do that. edit And for god's and mine sake, don't do it with JS.

BlakeGru · Accepted Answer · 2012-06-06 17:05:01Z

0

if they are disabled then you should use the "disabled" property that is built into checkboxes. This will both disable them and give them a disabled appearance.

answered Jun 6, 2012 at 17:05

BlakeGru

7026 silver badges14 bronze badges

3 Comments

user1329307 Over a year ago

That is what I do currently, however there are 1 or 2 browsers that do disable the box but DO NOT give them a disabled appearance.

ajax333221 Over a year ago

@user1329307 you can try to use custom disable CSS input:disabled

BlakeGru Over a year ago

If you're looking for perfection then you're not going to achieve it through standard browser controls. They vary widely even between browser versions, adding browser/OS on top of that and it's a nightmare. It sounds like what you really want is consistency, and you can only have that with custom form elements. There are a bunch of guides out there, and even more out-of-box solutions. Maybe it would be worth your time to investigate that option further?

Collectives™ on Stack Overflow

Change Checkbox Color in Javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related