Help with a possible CSS issue

[Mr.Bill]

How would I go about changing the default color of a check box from white to another color.

PHP Code:

<input type="checkbox" id="fa" name="fa" /><label for="fa"> Remove ads</label> 


I tried to add a class then added a line to the css for color and also tried background color got no results how would this possible?

[LiamSwan]

Checkboxes, and radio buttons cannot be altered using css, they are rendered by the visitors operating system. There is no way to get around it.

(You could change the border colors for checkboxes using css but I don't think any browser other than IE will work that way)

The key to changing their appearance is by not displaying checkboxes at all, use an image instead, and glue it together with a few lines of JavaScript

What happens is that when the page is loaded a JavaScript will scan the page for checkboxes and hide them and place an image in the same position, which will act exactly like a normal checkbox.

[Mr.Bill]

<script>
function changecolor(obj){
if (obj.checked) obj.parentNode.style.backgroundColor='green'
else obj.parentNode.style.backgroundColor='red'}
</script>

<form>
<div style="width:14px;height:14px;clip:rect(0 14 14 0);overflow:hidden;">
<span style="background-color: red;position:relative;top:-3px;left:-3px;">
<input onclick="changecolor(this)" type="checkbox" style="margin:0; padding:0; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50); -moz-opacity:0.5">
</span></div>
</form>

I like the image idea better

[LiamSwan]

Add this between the head tags

<script type="text/javascript" src="checkbox.js"></script>

Create checkbox.js and insurt it into your directory
The following is the content of checkbox.js
You don't need to understand it, just embed it into your page and it'll work
The only thing you may want to change (/add) are the false.png and true.png

//global variables that can be used by ALL the function son this page. 
var inputs; 
var imgFalse = 'false.png'; 
var imgTrue = 'true.png'; 

//this function runs when the page is loaded, put all your other onload stuff in here too. 
function init() { 
    replaceChecks(); 
} 

function replaceChecks() { 
     
    //get all the input fields on the page 
    inputs = document.getElementsByTagName('input'); 

    //cycle trough the input fields 
    for(var i=0; i < inputs.length; i++) { 

        //check if the input is a checkbox 
        if(inputs[i].getAttribute('type') == 'checkbox') { 
             
            //create a new image 
            var img = document.createElement('img'); 
             
            //check if the checkbox is checked 
            if(inputs[i].checked) { 
                img.src = imgTrue; 
            } else { 
                img.src = imgFalse; 
            } 

            //set image ID and onclick action 
            img.id = 'checkImage'+i; 
            //set image 
            img.onclick = new Function('checkChange('+i+')'); 
            //place image in front of the checkbox 
            inputs[i].parentNode.insertBefore(img, inputs[i]); 
             
            //hide the checkbox 
            inputs[i].style.display='none'; 
        } 
    } 
} 

//change the checkbox status and the replacement image 
function checkChange(i) { 

    if(inputs[i].checked) { 
        inputs[i].checked = ''; 
        document.getElementById('checkImage'+i).src=imgFalse; 
    } else { 
        inputs[i].checked = 'checked'; 
        document.getElementById('checkImage'+i).src=imgTrue; 
    } 
} 

window.onload = init;

[Mr.Bill]

Incredible that is very nice thank you. Now if I could figure our how to add REP i would give some. I appreciate this

[LiamSwan]

Good luck with whatever it is your doing.