Changing the size of a custom css checkbox

Question

I generated a custom CSS checkbox from csscheckbox.com and wanted to know if there was a way to change the width of the box on the fly.

I've attached the key css and html that is used to generated the checkbox so you can take a look. Ideally, I'd like to be able to change the width and the height of the checkbox just as I've changed the position of it using the div (but I know it probably isn't that simple).

    input[type=checkbox].css-checkbox {
		position:absolute;
		z-index:-1000;
		left:-1000px; 
		verflow: hidden;
		clip: rect(0 0 0 0);
		height:1px;
		width:1px;
		margin:-1px;
		padding:0;
		border:0;
	}

	input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
		padding-left:25px;
		height:20px; 
		display:inline-block;
		line-height:20px;
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:20px;
		vertical-align:middle;
		cursor:pointer;
	}

	input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
		background-position: 0 -20px;
	}

	label.css-label {
		background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1fa1a7b77abfce3de56af87fcec6bed3.png);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

    <div style="position:absolute;top:0;left:0;">
        <input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox">
        <label for="checkboxG4" class="css-label radGroup1 clr">Option 1</label>
    </div>

G-Cyrillus · Accepted Answer · 2015-02-11 16:44:26Z

You could use background-size, example with a 40px box :

input[type=checkbox].css-checkbox {
  position:absolute;
  z-index:-1000;
  left:-1000px; 
  verflow: hidden;
  clip: rect(0 0 0 0);
  height:1px;
  width:1px;
  margin:-1px;
  padding:0;
  border:0;
}

input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
  padding-left:45px;
  height:40px; 
  display:inline-block;
  line-height:40px;
  background-repeat:no-repeat;
  background-position: 0 0;
  font-size:20px;
  vertical-align:middle;
  cursor:pointer;
  background-size:40px
}

input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
  background-position: left bottom;
}

label.css-label {
  background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1fa1a7b77abfce3de56af87fcec6bed3.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

  <div style="position:absolute;top:0;left:0;">
        <input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox">
        <label for="checkboxG4" class="css-label radGroup1 clr">Option 1</label>
</div>

Collectives™ on Stack Overflow

Changing the size of a custom css checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related