www.webdeveloper.com
Results 1 to 11 of 11

Thread: Style a HTML checkbox?

Hybrid View

  1. #1
    Join Date
    Aug 2006
    Posts
    89

    Style a HTML checkbox?

    Is it possible to use CSS to stylize checkboxes as you can with any other form element, without using javascript
    "It'll could only cost you your life--and you got that for free."
    Forgotten Games

  2. #2
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    well... a 30 second test tells me that inline styling like this:

    HTML Code:
    <input type="checkbox"  style="background-color:#00FF00; border: solid 1px #006699; border-bottom: dashed 3px; #000;" />
    Works in IE7, but not FF2 or Safari for Windows. FF3 untested.

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    Proof :P : Styling checkboxes with CSS

    Screen shots of styles in different browsers and operating systems.

  4. #4
    Join Date
    Aug 2006
    Posts
    89
    So nothing that works in FF, I assume.
    "It'll could only cost you your life--and you got that for free."
    Forgotten Games

  5. #5
    Join Date
    May 2009
    Posts
    1
    So, basically, styling checkboxes is not a very good option?

    I saw a thing on styling them with Jquery... maybe I should do that?

  6. #6
    Join Date
    Apr 2010
    Posts
    1

    Styled checkbox – cross browser solution using one short JavaScript function

    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 and please let me know what you think.

  7. #7
    Join Date
    May 2010
    Posts
    1
    @bigirl - AWESOME solution - love it, love it - such a simple way to solve this problem!!

    Here is my jQuery version of your javascript.
    It wraps each checkbox in the wrapper div
    Assigns the 'checked state' class if the checkbox is supposed to be checked
    and toggles the 'checked state'

    Code:
    $(document).ready(function() {	 	
    	$('input[type=checkbox]').each(function() {
    		$(this).wrap(function() {
    			return ($(this).is(':checked')) ? '<div class="custom_checkbox selected" />' : '<div class="custom_checkbox" />';
    		});
    	});
    	
    	$('.custom_checkbox input[type=checkbox]').click(function () {
    		$(this).parent().toggleClass('selected');
    	});
    });
    FYI:

    Tested on Windows 7 in:
    - IE8
    - FF 3.5.9
    - Safari 4.0.5
    - Chrome 5.0

    All working!

  8. #8
    Join Date
    May 2010
    Posts
    8
    why you don't use jquery for this ?

  9. #9
    Join Date
    May 2012
    Posts
    1

    Mucho Gracias

    Quote Originally Posted by bigirl View Post
    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 and please let me know what you think.
    Hello! Signed up just to say thankyou to bigirl and Alt_F4. I'm hoping this technique can help me style my <input type="file"> as well. Alt_F4, I used your jQuery but i think it was better with <span> instead of <div>. I was getting a line break with divs on a few of the spots.

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Not a bright idea to style the checkboxes and radio buttons. After all, they are strictly functional elements, and there is no serious reason to style them. To style what? A very small square? An even smaller circle?

  11. #11
    Join Date
    Jan 2013
    Posts
    1
    Quote Originally Posted by Kor View Post
    Not a bright idea to style the checkboxes and radio buttons. After all, they are strictly functional elements, and there is no serious reason to style them. To style what? A very small square? An even smaller circle?
    Only a programmer would say something like that. Why? you ask. Um, so it looks different to other websites... I think that's a pretty fine reason why.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles