How to set the color of a checkbox

Discussion in 'HTML' started by Stefan Mueller, Feb 14, 2006.

  1. 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?

    Stefan
     
    Stefan Mueller, Feb 14, 2006
    #1
    1. Advertising

  2. Stefan Mueller

    Mark Parnell Guest

    Deciding to do something for the good of humanity, Stefan Mueller
    <> declared in alt.html:

    > 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?


    The same way, but browsers vary significantly in what they will allow
    you to do with styling form elements.

    --
    Mark Parnell

    Now implementing http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Feb 14, 2006
    #2
    1. Advertising

  3. Stefan Mueller

    Jose Guest

    > The same way, but browsers vary significantly in what they will allow
    > you to do with styling form elements.


    Well put. People think web design is setting the page up to display
    "properly", but really, it is asking permission from a slew of browsers
    and other display devices, all at the same time, to please do something
    you'd like to happen.

    Jose
    --
    Money: what you need when you run out of brains.
    for Email, make the obvious change in the address.
     
    Jose, Feb 14, 2006
    #3
  4. Does that mean that it's not possible to set the color of the area where the
    check is located?
    Stefan
     
    Stefan Mueller, Feb 15, 2006
    #4
  5. Stefan Mueller

    Neredbojias Guest

    With neither quill nor qualm, Stefan Mueller quothed:

    > Does that mean that it's not possible to set the color of the area where the
    > check is located?


    Not if it's in the mail.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Feb 15, 2006
    #5
  6. >> Does that mean that it's not possible to set the color of the area where
    >> the
    >> check is located?

    >
    > Not if it's in the mail.


    Sorry, I'm not an English native speaker and therefore I don't understand
    your answer. What are you talking about mail?
    Is it possible to set the color of the area where the check of a checkbox is
    located or is it not possible?

    Stefan
     
    Stefan Mueller, Feb 15, 2006
    #6
  7. Stefan Mueller wrote:
    >>>Does that mean that it's not possible to set the color of the area where
    >>>the
    >>>check is located?

    >>
    >>Not if it's in the mail.

    >
    >
    > Sorry, I'm not an English native speaker and therefore I don't understand
    > your answer. What are you talking about mail?
    > Is it possible to set the color of the area where the check of a checkbox is
    > located or is it not possible?


    A joke in response to 'where is the check located': 'The check is in the
    mail' is common excuse by deadbeats to their debtors.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 15, 2006
    #7
  8. Stefan Mueller

    Jose Guest

    > Sorry, I'm not an English native speaker and therefore I don't understand
    > your answer. What are you talking about mail?


    The word "check" also means a financial instrument, and "the check is in
    the mail" means "I've already sent my payment, stop bothering me, you'll
    get it shortly.", often used when the check is actually =not= in the mail.

    My slavic cousin was going to visit me from overseas and I went to the
    airport but he wasn't on the plane. When I called his wife, she told me
    that airfare was too expensive so they used the postal service. "The
    Czeck is in the mail".

    Jose
    --
    Money: what you need when you run out of brains.
    for Email, make the obvious change in the address.
     
    Jose, Feb 15, 2006
    #8
  9. Stefan Mueller

    Mark Parnell Guest

    Deciding to do something for the good of humanity, Stefan Mueller
    <> declared in alt.html:

    > Sorry, I'm not an English native speaker and therefore I don't understand
    > your answer. What are you talking about mail?


    Don't worry - it's just a result of the American misspelling of cheque.
    ;-)

    > Is it possible to set the color of the area where the check of a checkbox is
    > located or is it not possible?


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

    --
    Mark Parnell

    Now implementing http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Feb 15, 2006
    #9
  10. Stefan Mueller

    Nik Coughlin Guest

    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?
    >
    > Stefan


    There is a very dirty way to do it... I don't know if I should tell you
    though, I might get told off, because it's something that you really
    shouldn't do for a whole number of useability related reasons that I won't
    go into here, though I'm sure the regulars will be quick to point them out
    :)

    Here's how it works.

    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.
     
    Nik Coughlin, Feb 15, 2006
    #10
  11. Stefan Mueller

    Nik Coughlin Guest

    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/
     
    Nik Coughlin, Feb 16, 2006
    #11
  12. 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
     
    Stefan Mueller, Feb 16, 2006
    #12
  13. > 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
     
    Stefan Mueller, Feb 16, 2006
    #13
  14. > 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
     
    Stefan Mueller, Feb 19, 2006
    #14
  15. Stefan Mueller

    Nik Coughlin Guest

    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/
     
    Nik Coughlin, Feb 19, 2006
    #15
  16. You're right. With your code it works perfect.
    I guess 'body onload' does the trick.

    Many thanks again
    Stefan
     
    Stefan Mueller, Feb 21, 2006
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. moondaddy
    Replies:
    3
    Views:
    38,939
    moondaddy
    Apr 28, 2004
  2. PJ6
    Replies:
    4
    Views:
    4,925
  3. Andrew Arace

    BGR Color to Java Color

    Andrew Arace, Sep 13, 2003, in forum: Java
    Replies:
    7
    Views:
    7,955
    Stephen Gilbert
    Sep 16, 2003
  4. Niels Dybdahl

    Color.white vs. Color.WHITE

    Niels Dybdahl, Oct 6, 2004, in forum: Java
    Replies:
    3
    Views:
    471
    Chris Smith
    Oct 6, 2004
  5. Kamaljeet Saini
    Replies:
    0
    Views:
    475
    Kamaljeet Saini
    Feb 13, 2009
Loading...

Share This Page