SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get :checked pseudo-class to work

    This is doing my nut in - I can't get the :checked pseudo-class working
    http://reference.sitepoint.com/css/pseudoclass-checked

    This is the form that I'm using:

    Code:
    <form>
    <fieldset>
    <legend>What type of pets do you have?</legend>
    <label for="cat">cat </label>
    <input type="checkbox" name="pet" value="" id="cat"/>
    <label for="dog">dog </label>
    <input type="checkbox" name="pet" value="" id="dog" />
    <label for="rabbit">rabbit</label>
    <input type="checkbox" name="pet" value="" id="rabbit" checked="checked" />
    </fieldset>
    </form>
    And these are the two pieces of CSS I'm playing around with:

    Code:
    input[type=”checkbox”]:checked {
    background : #ffffcc;
    margin-left : 15px;
    }
    Or

    Code:
    form:checked {
    background : #ffffcc;
    margin-left : 15px;
    }
    Does anybody have any idea what I'm doing wrong?
    Let everyday be Christmas

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Using a CSS 3 selector in a browser version that doesn't support it yet? The only browser I can find that supports it is Opera. Neither Firefox or Chrome recognise those selectors.

    Also you have the wrong sort of " around the word checkbox.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It's actually working in all the browsers that we listed in the reference. (assuming you use the correct quote marks)

    The problem is that you can't change the background colour of a check box in those browsers (you can change the background in IE but it doesn't support the :checked property)

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Do multiple attribute selectors have better support?
    Code:
    input[type="checkbox"][checked="checked"] {
    
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Do multiple attribute selectors have better support?
    Code:
    input[type="checkbox"][checked="checked"] {
    
    }
    Yes that would allow IE8 to play as well - good catch

    Although we found attribute selectors to be pretty buggy for some things.


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
  •