Skip navigation
JudiFLGator
JudiFLGator Calculating status...
Currently Being Moderated

Need help interpreting how to add this on/off switch to css

Jul 20, 2012 8:43 AM

I have an on/off switch to add to my css

 

That is what the checkbox looks like now: but I need to add this image:

 

alertswitch.png

instead and although I have tried editing the css and changing the class I am not doing something right. Can someone suggest documentation I can go to that I need to read? And by the way - Murray, if you answer this post, please be nice - , I'm sensitive.

Regards, Judith

822 Views   8 Replies   Latest reply: Jon Fritz II, Aug 22, 2012 2:21 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Jul 20, 2012 10:43 AM   in reply to JudiFLGator
    Report

    Show us your code, please.

     

     

    Nancy O.

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    2. Ken Binney,
    Jul 20, 2012 12:42 PM   in reply to JudiFLGator
    Report

    A pair of radio buttons would be more appropriate functionality

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Jul 21, 2012 9:47 AM   in reply to JudiFLGator
    Report

    And by the way - Murray, if you answer this post, please be nice - , I'm sensitive.

    Regards, Judith

     

    Does this imply that my answers are gruff?  I'm a very gentle responder!

     
    |
    Mark as:
  • JudiFLGator
    Currently Being Moderated
    4. JudiFLGator,
    Jul 25, 2012 7:31 AM   in reply to Nancy O.
    Report

     

     
    |
    Mark as:
  • JudiFLGator
    Currently Being Moderated
    5. JudiFLGator,
    Jul 25, 2012 7:34 AM   in reply to Nancy O.
    Report

    I tried to post my code here and it won't let me do it. Is there some way for me to add a text file? Could you possibly give me some resources I can go to so I can look for alternitive ways to handle this. I would like to try to work on this in whatever way I can. Thanks in advance for any help you can give me.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    Jul 25, 2012 7:37 AM   in reply to JudiFLGator
    Report

    To post your code here, copy it to the clipboard, start a Reply here, and paste into the reply.  You cannot use email to do this.  Alternatively (and even better), upload the file and simply post a link to the uploaded file.

     
    |
    Mark as:
  • JudiFLGator
    Currently Being Moderated
    7. JudiFLGator,
    Aug 22, 2012 1:46 PM   in reply to MurraySummers
    Report

    thanks for being so nice - sorry it took so long to get back to you. I was away.

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    8. Jon Fritz II,
    Aug 22, 2012 2:21 PM   in reply to JudiFLGator
    Report

    Here's what I've done in the past. Make sure to change the URL path to your actual image in the CSS...

     

    Add this into your <head>

     

    <style type="text/css">

     

    input[type="checkbox"] {     /* turns off display of the checkbox */

        display:none;

    }

    label {      /* turns labels into a block element and styles it */

        display:block;

        background-image:url(path/to/your-image.jpg);

        background-repeat:no-repeat;

        background-position:0px -27px;

        width:83px;

        height:27px;

    }

    input[type="checkbox"]:checked + label {     /* gives a new style to the label of a checked checkbox */

        background-position:0px 0px;

    }

     

    Then add this to your body...

     

        <input type="checkbox" id="check1" value="value1">

        <label for="check1"></label>

       

        <input type="checkbox" id="check2"  value="value2" >

        <label for="check2"></label>

       

        <input type="checkbox" id="check3"  value="value3" >

        <label for="check3"></label>

       

        <input type="checkbox" id="check4"  value="value4" >

        <label for="check4"></label>

    </style>

     

     

    Note the checkbox ids and "label for" indentifiers. They need to be the same for each pair.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points