• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1244
  • Last Modified:

check box background color works in IE but not in Netscape

Hi,

I have the following style to differentiate the selected check boxes by turning in to green color, this works good in IE, but not in netscape

if the check box is selected , in my javascript function, then I set the color as:

checkBoxename.style.backgroundColor = 'lightgreen';

Is there a different style option for netscape browsers?

Thanks in advance

javagiri
0
javagirip
Asked:
javagirip
  • 3
  • 3
1 Solution
 
BatalfCommented:
Try to use getElementById() to refer to the element

example:

<div id="checkBoxename" style="width:500px;height:500px"></div>
<script type="text/javascript">
document.getElementById('checkBoxename').style.backgroundColor='lightgreen';
</script>


Batalf
0
 
javagiripAuthor Commented:
Hi,

Sorry if my question was not clear, i mean the  input type = check box

for example:

<INPUT TYPE="CHECKBOX" id='checkBoxename' name = 'checkBoxename'>
 
     <script type="text/javascript">
        document.getElementById('checkBoxename').style.backgroundColor='lightgreen';
      </script>

This works good in IE, but not in netscape


Thanks
0
 
javagiripAuthor Commented:
Hi I have increased the points, can any one tell me how to change the background color of the check box or change the border color of the check box in Netscape?
Thanks
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
haobaba1Commented:
I don't think you can set a border or background on checkboxes in netscape or other gecko browsers. You can achieve the effect by putting some extra markup which I will show you below. Another issue though, "lightgreen" is a non-standard color. Read http://www.w3schools.com/css/css_colors.asp to pick a hex value that is the equivelant of what you get in Explorer.

This markup works to achieve the desired effect in both IE and netscape, with the unfortunate extra markup though.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <title>test</title>
            <style type="text/css">
                  .selspan input{
                        margin:.25em .25em .25em .25em;
                        border:1px solid #66ff88;
                  }
                  .nosel input{margin:.25em .25em .25em .25em;}
                  span.selspan{
                        color:#66FF66;
                        background:#66FF66;
                  }

                  span.nosel{
                  }
            </style>
      </head>
      <body>
            <span class="selspan"><input type="checkbox" name="test3" id="test3"></span>
            <span class="nosel"><input type="checkbox" name="test4" id="test4"></span>
      </body>
</html>
0
 
javagiripAuthor Commented:
Excellent, it works, just one more, how do I make the border go away if the box is unchecked?

Thanks
0
 
haobaba1Commented:
here is an updated version that uses javascript to alter the style of the span when the user unselects and selects the box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
      <head>
            <title>test</title>
            <style type="text/css">
                  .selspan input{
                        margin:.25em .25em .25em .25em;
                        border:1px solid #66ff88;
                  }
                  .nosel input{margin:.25em .25em .25em .25em;}
                  span.selspan
                  {
                        color:#66FF66;
                        background:#66FF66;
                  }

                  span.nosel
                  {
                        border:0;
                  }
                  
            </style>
      </head>
      <body>
             <span class="selspan" id="spantest3"><input type="checkbox" checked name="test3" id="test3" onClick="toggleCheck('test3');"></span>
<span class="nosel"  id="spantest4"><input type="checkbox" name="test4" id="test4" onClick="toggleCheck('test4');"></span>

<script type="text/javascript">
function toggleCheck(inputid)
{
         var sp= document.getElementById('span'+inputid);
        if(sp.className== 'selspan') {             sp.className='nosel'; }
         else {                 sp.className='selspan';    }
}
</script>

      </body>
</html>
0
 
haobaba1Commented:
Sorry about the border. I didn't actually adress that. It really isn't necessary at all so I would remove the border from the input style:

 .selspan input{
                    margin:.25em .25em .25em .25em;
               }
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now