Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to set the color of a checkbox

Reply
Thread Tools

How to set the color of a checkbox

 
 
Nik Coughlin
Guest
Posts: n/a
 
      02-16-2006
Nik Coughlin wrote:
> Stefan Mueller wrote:
>> With 'background-color' I can set the color of an input box. But how
>> can I set the color of the inner area of a checkbox?

>
> You have your normal checkbox, unstyled. You use JavaScript to hide
> it (so that it is still on the page but invisible) and use JavaScript
> to add your replacement checkbox, which is just a boring old <img>. You
> then use the onclick event of the image to switch between two
> custom images, one for checked and one for unchecked. At the same
> time you set the hidden checkbox to be checked or unchecked. When
> the form is submitted it gets the value from your hidden checkbox. If the
> user doesn't have Javascript enabled then they just get the
> normal unstyled checkbox as a fallback.


http://nrkn.com/customCheck/



 
Reply With Quote
 
 
 
 
Stefan Mueller
Guest
Posts: n/a
 
      02-16-2006
Thanks to all of you for the clarification.

> It depends on the browser. Some browsers may allow you to, some
> certainly don't.


Hmm, that sounds very bad.
I just would like to make the checkbox purple if someone changes the default
value (check set or not set). For an input box it works fine. I just can
change its background color.

Stefan


 
Reply With Quote
 
 
 
 
Stefan Mueller
Guest
Posts: n/a
 
      02-16-2006
> http://nrkn.com/customCheck/

Sorry Nik, I didn't see your solution before now, but it's great.
It's exactly what I was looking for.

Many thanks
Stefan


 
Reply With Quote
 
Stefan Mueller
Guest
Posts: n/a
 
      02-19-2006
> http://nrkn.com/customCheck/

I have a problem with your solution.
If you modify the line
<body onload="document.getElementById( 'check' ).style.display = 'none';">
of your code with
<body onload="document.getElementById( 'check' ).style.display =
'inline';">
then you'll see also the real checkbox.

If you click now on the colored checkbox (image) the real checkbox gets also
checked. But if you press now F5 (browser refresh) the real checkbox remains
checked whereas the colored checkbox gets cleared. Therefore I have an
inconsistency between the real and the colored checkbox.
If you press Shift + F5 then it works.

Does someone know how to fix this problem?
Stefan


 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      02-19-2006
Stefan Mueller wrote:
>> http://nrkn.com/customCheck/

>
> I have a problem with your solution.
> If you modify the line
> <body onload="document.getElementById( 'check' ).style.display =
> 'none';"> of your code with
> <body onload="document.getElementById( 'check' ).style.display =
> 'inline';">
> then you'll see also the real checkbox.
>
> If you click now on the colored checkbox (image) the real checkbox
> gets also checked. But if you press now F5 (browser refresh) the real
> checkbox remains checked whereas the colored checkbox gets cleared.
> Therefore I have an inconsistency between the real and the colored
> checkbox. If you press Shift + F5 then it works.
>
> Does someone know how to fix this problem?
> Stefan


Hi Stefan,

That didn't occur to me. I've updated the example I provided you to show
how to handle this:

http://nrkn.com/customCheck/


 
Reply With Quote
 
Stefan Mueller
Guest
Posts: n/a
 
      02-21-2006
You're right. With your code it works perfect.
I guess 'body onload' does the trick.

Many thanks again
Stefan


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Changing font color from current font color to black color Kamaljeet Saini Ruby 0 02-13-2009 04:58 PM
ASPNET CheckBox and a CheckBox in a TemplateField Jason Huang ASP .Net 0 06-29-2007 12:35 AM
DataGrid and embeded Checkbox..How to find if checkbox clicked =?Utf-8?B?RG90TmV0RGV2?= ASP .Net 1 10-06-2006 04:11 PM
disable checkbox list checkbox Vikram ASP .Net 1 01-25-2006 02:59 PM
Text on Checkbox below the checkbox tshad ASP .Net 0 04-14-2005 11:26 PM



Advertisments