SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Highlighting radio button / checkboxes label

    Hi guys

    I was wondering if anyone can help. I'd like to be able to highlight checkbox and radio buttons when they are selected. I can do the hover no problem with the code below, but I would really like to have the label permanently highlighted when it is selected / checked. Note - I will use a different colour than the hover. Is this possible

    <input type="checkbox" value="checklist" id="checklist" name="checklist"/>
    <label for="checklist">Item 1</label>
    <label for="checklist">Item 2</label>


    label:hover, label:active {
    background:yellow;
    }

    Cheers

    Del

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Like this? Note-not fully supported everywhere.
    Code:
    <!doctype html><html>
    <head><style>
    input[type="checkbox"]:checked+label {
    background:yellow;
    }
    </style>
    </head>
    <body>
    <input type="checkbox" value="checklist" id="checklist" name="checklist"/>
    <label for="checklist">Item 1</label>
    <label for="checklist">Item 2</label>
    
    
    </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks great. I will give that a try.

    Out of interest - which browsers are not supported?

    Thanks for your help

    Cheers

    Del

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    You can see a small scale version of the supported browsers here
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks for your help Ryan - really appreciated.

    Cheers

    Del

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    No problem . You're welcoem.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •