Checkbox size in HTML/CSS

问题:

Is it possible to set the size of a checkbox using CSS or HTML?

width and size work under IE6+ but not with Firefox, where the checkbox stays 16x16 even if I set a smaller size.

回答1:

It\'s a little ugly (due to the scaling up), but it works on most newer browsers:

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type=\"checkbox\" name=\"optiona\" id=\"opta\" checked />
<span class=\"checkboxtext\">
  Option A
</span>
<input type=\"checkbox\" name=\"optionb\" id=\"optb\" />
<span class=\"checkboxtext\">
  Option B
</span>
<input type=\"checkbox\" name=\"optionc\" id=\"optc\" />
<span class=\"checkboxtext\">
  Option C
</span>

回答2:

Working solution for all modern browsers.

input[type=checkbox] {
  transform: scale(1.5);
}

---

Compatibility:

• IE: 10+
• FF: 16+
• Chrome: 36+
• Safari: 9+
• Opera: 23+
• iOS Safari: 9.2+
• Chrome for Android: 51+

---

Appearance:

• Chrome 58 (May 2017), Windows 10

回答3:

An easy solution is use the property zoom:

input[type=checkbox] {
    zoom: 1.5;
}

回答4:

2017 version: https://jsfiddle.net/ksvx2txb/11/

About: browser will use css zoom function if it is supported, if not, will use transform: scale.

Why just don\'t use transform? It looks ugly on some browsers, including chrome on mac.

Chrome - works
Firefox (mac) - works
Opera - works
Edge - works

Firefox (win) - big, blurry !
Safari - big, blurry !

@supports (zoom:2) {
	input[type=\"radio\"],  input[type=checkbox]{
	zoom: 2;
	}
}
@supports not (zoom:2) {
	input[type=\"radio\"],  input[type=checkbox]{
		transform: scale(2);
		margin: 15px;
	}
}
label{
  /* fix vertical align issues */
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}

<input type=\"radio\" name=\"aa\" value=\"1\" id=\"aa\" checked /> 
<label for=\"aa\">Radio 1</label>
<br />
<input type=\"radio\" name=\"aa\" value=\"2\" id=\"bb\" /> 
<label for=\"bb\">Radio 2</label>

<br /><br />

<input  type=\"checkbox\" name=\"optiona\" id=\"cc\" checked /> 
<label for=\"cc\">Checkbox 1</label>
<br />
<input  type=\"checkbox\" name=\"optiona\" id=\"dd\" /> 
<label for=\"dd\">Checkbox 1</label>

回答5:

Preview:
http://jsfiddle.net/h4qka9td/

*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* DEMO 3 */

.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #a5a39d;
  border-radius: 40px;
  box-shadow:
      inset 0 3px 8px 1px rgba(0,0,0,0.2),
      0 1px 0 rgba(255,255,255,0.5);
}

.switch.demo3 label:after {
  content: \"\";
  position: absolute;
  z-index: -1;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}

.switch.demo3 label:before {
  content: \"\";
  position: absolute;
  z-index: -1;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border-radius: inherit;
  background: #eee;
  background: -moz-linear-gradient(#e5e7e6, #eee);
  background: -ms-linear-gradient(#e5e7e6, #eee);
  background: -o-linear-gradient(#e5e7e6, #eee);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
  background: -webkit-linear-gradient(#e5e7e6, #eee);
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow:
      0 1px 0 rgba(255,255,255,0.5);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}

.switch.demo3 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
      inset 0 1px 0 white,
      0 0 8px rgba(0,0,0,0.3),
      0 5px 5px rgba(0,0,0,0.2);
}

.switch.demo3 label i:after {
  content: \"\";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}

.switch.demo3 label i:before {
  content: \"off\";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: -50%;
}

.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}

.switch.demo3 input:checked ~ label i:before {
  content: \"on\";
  right: 115%;
  color: #82a06a;
  text-shadow: 
    0 1px 0 #afcb9b,
    0 -1px 0 #6b8659;
}

<div class=\"switch demo3\">
  <input type=\"checkbox\">
  <label><i></i>
  </label>
</div>

<div class=\"switch demo3\">
  <input type=\"checkbox\" checked>
  <label><i></i>
  </label>
</div>

回答6:

I just came out with this:

input[type=\"checkbox\"] {display:none;}
input[type=\"checkbox\"] + label:before {content:\"☐\";}
input:checked + label:before {content:\"☑\";}
label:hover {color:blue;}

<input id=\"check\" type=\"checkbox\" /><label for=\"check\">Checkbox</label>

Of course, thanks to this, you can change the value of content to your needs and use an image if you wish or use another font...

The main interest here is that:

1. The checkbox size stays proportional to the text size

2. You can control the aspect, the color, the size of the checkbox

3. No extra HTML needed !

4. Only 3 lines of CSS needed (the last one is just to give you ideas)

Edit: As pointed out in the comment, the checkbox won\'t be accessible by key navigation. You should probably add tabindex=0 as a property for your label to make it focusable.

回答7:

I was looking to make a checkbox that was just a little bit larger and looked at the source code for 37Signals Basecamp to find the following solution-

You can change the font size to make the checkbox slightly larger:

font-size: x-large;

Then, you can align the checkbox properly by doing:

vertical-align: top;
margin-top: 3px; /* change to center it */

回答8:

Found this useful hint today: you can make checkboxes larger in Safari — which is generally resistant to the usual approaches — with this attribute: -webkit-transform: scale(1.3, 1.3);

回答9:

My understanding is that this isn\'t easy at all to do cross-browser. Instead of trying to manipulate the checkbox control, you could always build your own implementation using images, javascript, and hidden input fields. I\'m assuming this is similar to what niceforms is (from Staicu lonut\'s answer above), but wouldn\'t be particularly difficult to implement. I believe jQuery has a plugin to allow for this custom behavior as well (will look for the link and post here if I can find it).

回答10:

The problem is Firefox doesn\'t listen to width and height. Disable that and your good to go.

input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}

回答11:

The other answers showed a pixelated checkbox, while I wanted something beautiful. The result looks like this:

Even though this version is more complicated I think it\'s worth giving it a try.

HTML

<label class=\"checkbox-list__item\">
  <input class=\"checkbox_buttons\" type=\"checkbox\" checked=\"checked\" style=\"display: none;\">
  <div class=\"checkbox-list__check\"></div>
</label>

SCSS

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;

  &:last-of-type {
    border-bottom: 0;
  }
}

.checkbox-list__check {
  width: 18px;
  height: 18px;
  border: 3px solid #b4bcc2;
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -12px;
  transition: border .3s ease;
  border-radius: 5px;

    &:before {
    position: absolute;
    display: block;
    width: 18px;
    height: 22px;
    top: -2px;
    left: 0px;
    padding-left: 2px;
    background-color: transparent;
    transition: background-color .3s ease;
    content: \'\\2713\';
    font-family: initial;
    font-size: 19px;
    color: white;
  }
}

// Checked state
input[type=\"checkbox\"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;

  &:before {
    background-color: #5bc0de;
  }
}

Jsfiddle: https://jsfiddle.net/asbd4hpr/

回答12:

I found this CSS-only library to be very helpful: https://lokesh-coder.github.io/pretty-checkbox/

Or, you could roll your own with this same basic concept, similar to what @Sharcoux posted. It\'s basically:

• Hide the normal checkbox (opacity 0 and placed where it would go)
• Add a css-based fake checkbox
• Use input:checked~div label for the checked style
• make sure your <label> is clickable using for=yourinputID

.pretty {
  position: relative;
  margin: 1em;
}
.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.pretty-inner {
  box-sizing: border-box;
  position: relative;
}
.pretty-inner label {
  position: initial;
  display: inline-block;
  font-weight: 400;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}
.pretty-inner label:after,
.pretty-inner label:before {
  content: \'\';
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
}
.pretty-inner label:before {
  border-color: #bdc3c7;
}
.pretty input:checked~.pretty-inner label:after {
  background-color: #00bb82;
  width: calc(1em - 6px);
  height: calc(1em - 6px);
  top: 4px;
  left: 4px;
}


/* Add checkmark character style */
.pretty input:checked~.pretty-inner.checkmark:after {
  content: \'\\2713\';
  color: #fff;
  position: absolute;
  font-size: 0.65em;
  left: 6px;
  top: 3px;
}



body {
  font-size: 20px;
  font-family: sans-serif;
}

<div class=\"pretty\">
	<input type=\"checkbox\" id=\"demo\" name=\"demo\">
	<div class=\"pretty-inner\"><label for=\"demo\">I agree.</label></div>
</div>

<div class=\"pretty\">
	<input type=\"checkbox\" id=\"demo\" name=\"demo\">
	<div class=\"pretty-inner checkmark\"><label for=\"demo\">Please check the box.</label></div>
</div>

回答13:

you can chnage the height and width in the code below

 .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius:5px;
    border:1px solid #ff7e02;

}

<div class=\"check\">




 <label class=\"container1\">Architecture/Landscape


<input type=\"checkbox\" checked=\"checked\">


<span class=\"checkmark\"></span>


 </label>