SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post checkbox problem

    Hi, I am trying to put image on the checkbox when it is checked,so that the default check mark will be replaced with my png image.but i could not achieve it,
    can anyone help me out here.


    HTML Code:
     <div>
      <label><input type="checkbox"></label>
    </div>

    Code:
     input[type="checkbox]:checked{
            bacground: url('mycheck.png') no-repeat scroll 0 0 transparent;
    }
    Thank you in advance.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Don't know if this is a typo or not, but the word "background" is misspelled in the code posted.

  3. #3
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Don't know if this is a typo or not, but the word "background" is misspelled in the code posted.
    Hi, Sorry for that,my bad it should be

    Code:
     input[type="checkbox]:checked{
            background: url('mycheck.png') no-repeat scroll 0 0 transparent;
    }

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    another typo is that you didnt close the quotes around "checkbox".

    Still, you are going about it the wrong way. unfortunately, styling actual inputs is difficult if not impossible. the trick is to style an adjacent element, usually a label and cover up the check box.

    here is a quick demo:
    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    		div{position: relative;}
    		input[type="checkbox"], input[type="checkbox"]+label {vertical-align: middle; display:inline-block;}
    		input[type="checkbox"]:checked+label:before{
            background:   red;
      		}
    		input[type="checkbox"]+label:before{
            background:   pink;
            content:'';
            height:1em;
            width:1em;
             position: absolute;
             left:0;
     		}
    		</style>
    	</head>
    	<body>
      <div><input type="checkbox" id="some-name"> <label for="some-name">Check-it</label></div>
    	</body>
    </html>
    if you wanted to house the input inside the label then you would need an additional tag
    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    		label{position: relative;}
    		input[type="checkbox"], input[type="checkbox"]+span {vertical-align: middle; display:inline-block;}
    		input[type="checkbox"]:checked+span:before{
            background:   red;
      		}
    		input[type="checkbox"]+span:before{
            background:   pink;
            content:'';
            height:1em;
            width:1em;
             position: absolute;
             left:0;
     		}
    		</style>
    	</head>
    	<body>
      <div><label for="some-name"><input type="checkbox" id="some-name"> <span>Click-it!</span></label></div>
    	</body>
    </html>

    hope that helps

  5. #5
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's amazing...thank you for this..by the way is it possible to make my checkbox bigger, I mean to increase the height,I tried but i failed to achieve...

    Thank you again

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    to make the actual ckeck box bigger, you need to change the display type of the input first.
    For example, style the input[type='checkbox'] {display: inline-block; height 100px; width:100px} ( float , and display:block should also work, but they each have their own side effects)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As an aside the CSSNinja has a good article on how to style radio and checkboxes here.

  8. #8
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As an aside the CSSNinja has a good article on how to style radio and checkboxes here.
    Hi Paul O'B,wow thank you for this link it is also nice, i never found this article before when i googling.

  9. #9
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    to make the actual ckeck box bigger, you need to change the display type of the input first.
    For example, style the input[type='checkbox'] {display: inline-block; height 100px; width:100px} ( float , and display:block should also work, but they each have their own side effects)
    Thank you again it's working now


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
  •