SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I set checkbox :focus appearance with CSS?

    I have
    Code:
    input:focus, select:focus {
      background: #ffffcc;
    }
    to set a soft yellow background in the current input element but it has no effect on checkboxes. I've tried
    Code:
    input[type="checkbox"]:focus {
      border-color: #ffffcc;
    }
    but that didn't work either. I'm looking at this page in Firefox 2.0 but I'd prefer a solution that worked in FF, IE, and Opera. Whatever I do with CSS the background for the checkbox remains white. Any help appreciated. Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The simple fact is that form elements only allow partial styling at the best of times and if the styling isn't showing then its 99% certain that it isn't implemented in that browser.

    You can change the checkbox background in opera but not in Firefox. Firefox will take an outline on focus though.

    Code:
    input:focus {
      background: #ffffcc;
        outline:5px solid #ffffcc;
    }
    IE however won't do anything on focus although you can color the background in the normal state (depending on element).

    See here for more information.


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
  •