SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to increase the checkbox size?

    how to increase the checkbox size?


    is it possible to increase the checkbox and radio button size?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you will need to use css for this!

    HTML:

    <form action="./">
    <input type="checkbox" class="largerCheckbox" name="checkBox">
    </form>

    CSS:

    <style type="text/css">
    <!--
    input.largerCheckbox
    {
    width: 30px;
    height: 30px;
    }
    //-->
    </style>

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This is a CSS question not a PHP question, also while on the topic you can't change the default size for the checkbox and radio buttons in some browsers which includes IE.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  4. #4
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the answer, ok

  5. #5
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    we can use image for the checkbox instead of the default size.

    HTML Code:
    
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$(".CheckBoxClass").change(function(){
    		if($(this).is(":checked")){
    			$(this).next("label").addClass("LabelSelected");
    		}else{
    			$(this).next("label").removeClass("LabelSelected");
    		}
    	});
    });
    </script>
    
    <style>
    	.CheckBoxClass{
    		display: none;
    	}
    .LabelSelected{
    	border: 1px dotted black;
    }
    </style>
    </head>
    <body>
    	<input id="CheckBox1" type="checkbox" class="CheckBoxClass">
    	<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Customize Checkbox 1</label>
    </body>
    </html>
    http://www.hieu.co.uk/blog/index.php...heckbox-radio/


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
  •