Styled checkbox – cross browser solution

Discussion in 'CSS' started by bigirl, Apr 27, 2010.

  1. #1
    For a long time I found solutions on the web that required too much code (JavaScript & Css).

    While reviewing those solutions, few things stood out:
    • Necessity of a background image – since it is a styled checkbox and has to have the flexibility of changing its border, background and the “v” color.
    • Problem hiding the checkbox (via Css) and replacing it with span or div. It required moving any script attached, from checkbox to its replacement.

    Solution: div with background image wraps a transparent checkbox.

    It was tested on Windows XP in browsers:
    - IE7 & 8
    - Firefox 3.5.9
    - Safari 4.0.5(531.22.7)
    - Google Chrome 4.1

    I’ll be thankful if someone could run this solution on Opera & other OS, so that the title of this post will be a correct one.

    View my solution here:http://bigirl.zxq.net/designedCheckbox.htm or download the attached files.
    Please let me know what you think.
     

    Attached Files:

    bigirl, Apr 27, 2010 IP