Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Coloring a checkbox – How? 1

Status
Not open for further replies.
JennyW

JennyW

Technical User
Mar 1, 2001
323
CA
Hi everyone!

If you go to the link below you’ll notice that my FORM fields are all colored.

However, the only field I don’t know how to color is the [tt]type=checkbox[/tt] field.



Does anyone know how I can make my checkbox field the same color as the rest of my FORMs fields?

Thanks for reading,
Jenny
 
Sort by date Sort by votes
It seems as though the browser manufacturers believe that the background of checkbox (and radio) buttons should be on the outside of the widget. Oh well. I don't know of any way to force a checkbox to correctly have a background color but I wrote a little script for you that will mimic it. With a little bit of effort it could be made to be cross browser compatible (IE only right now)...
Code: 
<html>
<style type=&quot;text/css&quot;>
	body{
		background-color:#ddaaff;
	}
	input{
		background:#aaaaaa;
		color:#ffffff;
		border:2 solid black;
	}
	.fakeCheckbox{
		position:static;
		background:#aaaaaa;
		color:#ffffff;
		border:2 solid black;
		width:23px;
		height:23px;
		text-align:center;
		vertical-align:middle;
		cursor:default;
	}
</style>
<body>
	<form id=frmDemo name=frmDemo>
		<input type=text><br>
		<div id=divFakecb1 class=fakeCheckbox custom=&quot;off&quot; hdn=&quot;hdnFakecb1&quot; onClick=&quot;ToggleCheck(this);&quot;></div><br>
		<input type=hidden id=hdnFakecb1 name=hdnFakecb1 value=&quot;off&quot;>
		<input type=button value=&quot;Submit&quot; onClick=&quot;DoSubmit('frmDemo');&quot;>
	</form>
</body>
<script language=&quot;javascript&quot;>
	var z=document.all
	var f=document.forms
	
	function ToggleCheck(oChk){
		
		if (oChk.custom=='off')	{
			oChk.custom='on';
			oChk.innerHTML = &quot;<font face='verdana' size=3><b>X</b></font>&quot;; //change this line to reflect what you want your 'check' to look like
			z[oChk.hdn].value='on';
		}
		else {
			oChk.custom='off';
			oChk.innerHTML = &quot;&quot;;
			z[oChk.hdn].value='off';
		}
	}

	function DoSubmit(frmID){
		f[frmID].action=&quot;nextpage.html&quot;; //or your CGI or ASP or whatever page
		f[frmID].method=&quot;GET&quot;; //or &quot;POST&quot; used &quot;GET&quot; so you could see the results on the address line
		f[frmID].submit();
	}

</script>
</html>

Hope it helps, Rob
robschultz@yahoo.com
-Focus on the solution to the problem, not the obstacles in the way.-
 
Upvote 0 Downvote
Wow!

Thanks for the post RobSchultz!

Does anyone know of a script that will work for both Netscape and IE where I can change the checkboxes color?

Thanks,
Jenny
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
689
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
199
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
760
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
699
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top