blocks|key|1685484|text|我的理解是，这并不容易做跨浏览器。您可以使用图像、javascript和隐藏输入字段构建自己的实现，而不是尝试操作checkbox控件。我假设这与niceforms类似(来自Staicu+lonut上面的答案)，但实现起来并不是特别困难。我相信jQuery也有一个插件来支持这种自定义行为(如果我能找到，我会在这里查找链接并发布)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1685485|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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).</p>


blocks|key|1685565|text|您可以使用以下属性在Safari中将复选框变得更大--它通常不支持常用的方法：-webkit-transform:+scale(1.3,+1.3);|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1685566|Source|1685567|entityMap|0|LINK|mutability|MUTABLE|url|http://forums.devnetwork.net/viewtopic.php?f=13&t=89167^0|13|Z|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>You can make checkboxes larger in Safari — which is generally resistant to the usual approaches — with this attribute: <code>-webkit-transform: scale(1.3, 1.3);</code></p>

<p><a href="http://forums.devnetwork.net/viewtopic.php?f=13&amp;t=89167" rel="nofollow noreferrer">Source</a></p>


blocks|key|1685626|text|它有点难看(由于扩展)，但它可以在大多数较新的浏览器上工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1685627|​|1685628|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+*/
++transform:+scale(2);
++padding:+10px;
}

/*+Might+want+to+wrap+a+span+around+your+checkbox+text+*/
.checkboxtext
{
++/*+Checkbox+text+*/
++font-size:+110%25;
++display:+inline;
}|code-block|syntax|javascript|1685629|<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>|1685630|1685631|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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 */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input  type="checkbox" name="optiona" id="opta" checked /&gt;
&lt;span class="checkboxtext"&gt;
  Option A
&lt;/span&gt;
&lt;input type="checkbox" name="optionb" id="optb" /&gt;
&lt;span class="checkboxtext"&gt;
  Option B
&lt;/span&gt;
&lt;input type="checkbox" name="optionc" id="optc" /&gt;
&lt;span class="checkboxtext"&gt;
  Option C
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1470430|text|预览：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1470431|http://jsfiddle.net/h4qka9td/|offset|length|1470432|​|1470433|*,*: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%25;
++height:+100%25;
++position:+relative;
++display:+block;
}

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

/*+DEMO+3+*/

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

.switch.demo3+label+{
++display:+block;
++width:+100%25;
++height:+100%25;
++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%25,+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%25,+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%25;
++width:+60%25;
++border-radius:+inherit;
++background:+silver;
++position:+absolute;
++z-index:+2;
++right:+40%25;
++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%25,+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%25;
++top:+25%25;
++width:+70%25;
++height:+50%25;
++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%25,+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%25;
++margin-top:+-12px;
++right:+-50%25;
}

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

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

.switch.demo3+input:checked+~+label+i:before+{
++content:+"on";
++right:+115%25;
++color:+#82a06a;
++text-shadow:+
++++0+1px+0+#afcb9b,
++++0+-1px+0+#6b8659;
}|code-block|syntax|javascript|1470434|<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>|1470435|1470436|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|T|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|C]]]]

<p>Preview:<br>
<a href="http://jsfiddle.net/h4qka9td/" rel="nofollow noreferrer">http://jsfiddle.net/h4qka9td/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>*,*: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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="switch demo3"&gt;
  &lt;input type="checkbox"&gt;
  &lt;label&gt;&lt;i&gt;&lt;/i&gt;
  &lt;/label&gt;
&lt;/div&gt;

&lt;div class="switch demo3"&gt;
  &lt;input type="checkbox" checked&gt;
  &lt;label&gt;&lt;i&gt;&lt;/i&gt;
  &lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1685747|text|一个简单的解决方案是使用属性zoom|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1685748|​|1685749|input[type="checkbox"]+{
++++zoom:+1.5;
}|code-block|syntax|javascript|1685750|<input+type="checkbox"+/>|1685751|1685752|entityMap^0|E|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>An easy solution is use the property <code>zoom</code>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="checkbox"] {
    zoom: 1.5;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1685864|text|我希望制作一个稍微大一点的复选框，并查看了37Signals+Basecamp的源代码，以找到以下解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1685865|您可以更改字体大小以使复选框稍大一些：|1685866|font-size:+x-large;|code-block|syntax|javascript|1685867|然后，您可以通过执行以下操作来正确对齐复选框：|1685868|vertical-align:+top;
margin-top:+3px;+/*+change+to+center+it+*/|1685869|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>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-</p>

<p>You can change the font size to make the checkbox slightly larger:</p>

<pre><code>font-size: x-large;
</code></pre>

<p>Then, you can align the checkbox properly by doing:</p>

<pre><code>vertical-align: top;
margin-top: 3px; /* change to center it */
</code></pre>


blocks|key|1685958|text|其他答案显示了一个像素化的复选框，而我想要一些漂亮的东西。结果如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1685959|📷|atomic|offset|length|1685960|​|1685961|尽管这个版本比较复杂，但我认为值得一试。|1685962|1685963|.checkbox-list__item+{
++position:+relative;
++padding:+10px+0;
++display:+block;
++cursor:+pointer;
++margin:+0+0+0+34px;
++border-bottom:+1px+solid+#b4bcc2;
}
.checkbox-list__item:last-of-type+{
++border-bottom:+0;
}

.checkbox-list__check+{
++width:+18px;
++height:+18px;
++border:+3px+solid+#b4bcc2;
++position:+absolute;
++left:+-34px;
++top:+50%25;
++margin-top:+-12px;
++transition:+border+.3s+ease;
++border-radius:+5px;
}
.checkbox-list__check: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;
}

input[type="checkbox"]:checked+~+.checkbox-list__check+{
++border-color:+#5bc0de;
}
input[type="checkbox"]:checked+~+.checkbox-list__check:before+{
++background-color:+#5bc0de;
}|code-block|syntax|javascript|1685964|<label+class="checkbox-list__item">
++<input+class="checkbox_buttons"+type="checkbox"+checked="checked"+style="display:+none;">
++<div+class="checkbox-list__check"></div>
</label>|1685965|1685966|JSFiddle：https://jsfiddle.net/asbd4hpr/|1685967|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/84bfca8c1982a608e1adacb8afb72682.png|imageAlt|1|LINK|MUTABLE|url|https://jsfiddle.net/asbd4hpr/^0|0|0|1|0|0|0|0|0|0|0|0|9|U|1|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1A|8|@]|9|@$E|1B|F|1C|1|1D]]|A|$]]|$1|G|3|H|5|6|7|1E|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1F|8|@]|9|@]|A|$]]|$1|K|3|H|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1H|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1I|8|@]|9|@]|A|$O|P]]|$1|S|3|H|5|6|7|1J|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1K|8|@]|9|@$E|1L|F|1M|1|1N]]|A|$]]|$1|V|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12|13|-4]]|14|$5|15|Z|16|A|$17|18]]]]

<p>The other answers showed a pixelated checkbox, while I wanted something beautiful.
The result looks like this:
<a href="https://i.stack.imgur.com/SQtB9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SQtB9.png" alt="checkbox preview"></a></p>

<p>Even though this version is more complicated I think it's worth giving it a try.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;
}
.checkbox-list__item: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;
}
.checkbox-list__check: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;
}

input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;
}
input[type="checkbox"]:checked ~ .checkbox-list__check:before {
  background-color: #5bc0de;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="checkbox-list__item"&gt;
  &lt;input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;"&gt;
  &lt;div class="checkbox-list__check"&gt;&lt;/div&gt;
&lt;/label&gt;</code></pre>
</div>
</div>
</p>

<p>JSFiddle: <a href="https://jsfiddle.net/asbd4hpr/" rel="nofollow noreferrer">https://jsfiddle.net/asbd4hpr/</a></p>


blocks|key|1470764|text|问题是Firefox不会监听宽度和高度。停用它，你就可以开始行动了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1470765|​|1470766|input[type=checkbox]+{
++++width:+25px;
++++height:+25px;
++++-moz-appearance:+none;
}|code-block|syntax|javascript|1470767|<label><input+type="checkbox">+Test</label>|1470768|1470769|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>The problem is Firefox doesn't listen to width and height. Disable that and your good to go.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;&lt;input type="checkbox"&gt; Test&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1686084|text|您可以在下面的代码中更改高度和宽度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1686085|​|1686086|.checkmark+{
++++position:+absolute;
++++top:+0;
++++left:+0;
++++height:+20px;
++++width:+20px;
++++border-radius:5px;
++++border:1px+solid+#ff7e02;
}|code-block|syntax|javascript|1686087|<div+class="check">

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

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

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

++++</label>
</div>|1686088|1686089|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can change the height and width in the code below</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius:5px;
    border:1px solid #ff7e02;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="check"&gt;

     &lt;label class="container1"&gt;Architecture/Landscape
                                          

    &lt;input type="checkbox" checked="checked"&gt;
                                          

    &lt;span class="checkmark"&gt;&lt;/span&gt;
                                 

    &lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1471193|text|默认情况下，复选框的外观似乎是固定的。但正如Worthy7所指出的，这可以使用CSS+appearance+property来解决。它将使复选框完全为空，因此您可以定义自己的外观。它的好处是:您可以使用现有的HTML代码。缺点:它是experimental+technology。Edge+(传统)和IE不使用自定义样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1471194|以下是所需的CSS样式：|1471195|​|1471196|input[type=checkbox]+{
++++width:+14mm;
++++-webkit-appearance:+none;
++++-moz-appearance:+none;
++++height:+14mm;
++++border:+0.1mm+solid+black;
}

input[type=checkbox]:checked+{
++++background-color:+lightblue;
}

input[type=checkbox]:checked:after+{
++++margin-left:+4.3mm;
++++margin-top:+-0.4mm;
++++width:+3mm;
++++height:+10mm;
++++border:+solid+white;
++++border-width:+0+2mm+2mm+0;
++++-webkit-transform:+rotate(45deg);
++++-moz-transform:+rotate(45deg);
++++-ms-transform:+rotate(45deg);
++++transform:+rotate(45deg);
++++content:+"";
++++display:+inline-block;
}|code-block|syntax|javascript|1471197|<label><input+type="checkbox">+Test</label>|1471198|1471199|截图：|1471200|Chrome：|1471201|📷|atomic|1471202|1471203|Firefox：|1471204|1471205|1471206|边缘：|1471207|1471208|1471209|边缘(传统)：|1471210|1471211|1471212|即：|1471213|1471214|1471215|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/appearance|1|https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/4c06721f0ff202d1adeacdd1f7e115cb.png|imageAlt|3|https://ask.qcloudimg.com/http-save/yehe-900000/7ca79dc6715fba51533c3ea8813052cf.png|4|https://ask.qcloudimg.com/http-save/yehe-900000/632c9a4c509a661f477f115c8d876916.png|5|https://ask.qcloudimg.com/http-save/yehe-900000/bc1b4b594a684e26f30b1d03b2f56952.png|6|https://ask.qcloudimg.com/http-save/yehe-900000/0b85110a26ec52b033a50f4edf059cb0.png^0|17|A|13|N|0|38|N|1|0|0|0|0|0|0|0|0|0|1|2|0|0|0|0|1|3|0|0|0|0|1|4|0|0|0|0|1|5|0|0|0|0|1|6|0|0^^$0|@$1|2|3|4|5|6|7|23|8|@$9|24|A|25|B|C]]|D|@$9|26|A|27|1|28]|$9|29|A|2A|1|2B]]|E|$]]|$1|F|3|G|5|6|7|2C|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|2D|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|2E|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|2F|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|2G|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|2H|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|2I|8|@]|D|@]|E|$]]|$1|V|3|W|5|X|7|2J|8|@]|D|@$9|2K|A|2L|1|2M]]|E|$]]|$1|Y|3|I|5|6|7|2N|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|2O|8|@]|D|@]|E|$]]|$1|11|3|W|5|X|7|2P|8|@]|D|@$9|2Q|A|2R|1|2S]]|E|$]]|$1|12|3|I|5|6|7|2T|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|2U|8|@]|D|@]|E|$]]|$1|15|3|W|5|X|7|2V|8|@]|D|@$9|2W|A|2X|1|2Y]]|E|$]]|$1|16|3|I|5|6|7|2Z|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|30|8|@]|D|@]|E|$]]|$1|19|3|W|5|X|7|31|8|@]|D|@$9|32|A|33|1|34]]|E|$]]|$1|1A|3|I|5|6|7|35|8|@]|D|@]|E|$]]|$1|1B|3|1C|5|6|7|36|8|@]|D|@]|E|$]]|$1|1D|3|W|5|X|7|37|8|@]|D|@$9|38|A|39|1|3A]]|E|$]]|$1|1E|3|I|5|6|7|3B|8|@]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|3C|8|@]|D|@]|E|$]]]|1G|$1H|$5|1I|1J|1K|E|$1L|1M]]|1N|$5|1I|1J|1K|E|$1L|1O]]|1P|$5|1Q|1J|1R|E|$1S|1T|1U|-4]]|1V|$5|1Q|1J|1R|E|$1S|1W|1U|-4]]|1X|$5|1Q|1J|1R|E|$1S|1Y|1U|-4]]|1Z|$5|1Q|1J|1R|E|$1S|20|1U|-4]]|21|$5|1Q|1J|1R|E|$1S|22|1U|-4]]]]

<p>The appearance of checkboxes seems to be fixed by default. But as pointed out by Worthy7 this can be remedied using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance" rel="nofollow noreferrer">CSS <code>appearance</code> property</a>. It will make checkboxes completely empty, so you can define your own appearance. What is nice about this: You can use your existing HTML code. Downside: It is <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental" rel="nofollow noreferrer">experimental technology</a>. Edge (legacy) and IE do not use the custom style.</p>
<p>Here are the needed CSS styles:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=checkbox] {
    width: 14mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 14mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightblue;
}

input[type=checkbox]:checked:after {
    margin-left: 4.3mm;
    margin-top: -0.4mm;
    width: 3mm;
    height: 10mm;
    border: solid white;
    border-width: 0 2mm 2mm 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;&lt;input type="checkbox"&gt; Test&lt;/label&gt;</code></pre>
</div>
</div>
</p>
<p>Screenshots:</p>
<p>Chrome: <a href="https://i.stack.imgur.com/YQHCo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQHCo.png" alt="enter image description here" /></a></p>
<p>Firefox: <a href="https://i.stack.imgur.com/pwFsF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pwFsF.png" alt="enter image description here" /></a></p>
<p>Edge: <a href="https://i.stack.imgur.com/kzI5O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kzI5O.png" alt="enter image description here" /></a></p>
<p>Edge (legacy): <a href="https://i.stack.imgur.com/AJy6X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AJy6X.png" alt="enter image description here" /></a></p>
<p>IE: <a href="https://i.stack.imgur.com/bSvp6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bSvp6.png" alt="enter image description here" /></a></p>


blocks|key|1471269|text|我认为最简单的解决方案是按照一些用户的建议重新设置复选框的样式。下面的CSS适用于我，只需要几行CSS，并回答了OP问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1471270|input[type=checkbox]+{
++++-webkit-appearance:+none;
++++-moz-appearance:+none;
++++vertical-align:+middle;
++++width:+14px;+
++++height:+14px;
++++font-size:+14px;
++++background-color:+#eee;
}

input[type=checkbox]:checked:after+{
++++position:+relative;
++++bottom:+3px;
++++left:+1px;
++++color:+blue;
++++content:+"\2713";+/*+check+mark+*/
}|code-block|syntax|javascript|1471271|正如这篇文章中提到的，缩放属性似乎在Firefox上不起作用，转换可能会导致不希望的效果。|1471272|在Chrome和Firefox上测试，应该可以在所有现代浏览器上工作。只需更改属性(颜色、大小、底部、左侧等)满足您的需求。希望它能帮上忙！|1471273|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I think the simplest solution is re-style the checkbox as some users suggest. The CSS below is working for me, only requires a few lines of CSS, and answers the OP question:</p>

<pre><code>input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #eee;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 3px;
    left: 1px;
    color: blue;
    content: "\2713"; /* check mark */
}
</code></pre>

<p>As mentioned in this post, the zoom property seems not to work on Firefox, and transforms may cause undesired effects.</p>

<p>Tested on Chrome and Firefox, should work for all modern browsers. Just change the properties (colors, size, bottom, left, etc.) to your needs. Hope it helps!</p>


blocks|key|1471322|text|我的名声有点太低，不能发表评论，但我对Jack+Miller上面的代码做了修改，以便当你选中和取消选中它时，它不会改变大小。这给我带来了文本对齐问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1471323|​|1471324|++++input[type=checkbox]+{
++++++++width:+17px;
++++++++-webkit-appearance:+none;
++++++++-moz-appearance:+none;
++++++++height:+17px;
++++++++border:+1px+solid+black;
++++}

++++input[type=checkbox]:checked+{
++++++++background-color:+#F58027;
++++}

++++input[type=checkbox]:checked:after+{
++++++++margin-left:+4px;
++++++++margin-top:+-1px;
++++++++width:+4px;
++++++++height:+12px;
++++++++border:+solid+white;
++++++++border-width:+0+2px+2px+0;
++++++++-webkit-transform:+rotate(45deg);
++++++++-moz-transform:+rotate(45deg);
++++++++-ms-transform:+rotate(45deg);
++++++++transform:+rotate(45deg);
++++++++content:+"";
++++++++display:+inline-block;
++++}
++++input[type=checkbox]:after+{
++++++++margin-left:+4px;
++++++++margin-top:+-1px;
++++++++width:+4px;
++++++++height:+12px;
++++++++border:+solid+white;
++++++++border-width:+0;
++++++++-webkit-transform:+rotate(45deg);
++++++++-moz-transform:+rotate(45deg);
++++++++-ms-transform:+rotate(45deg);
++++++++transform:+rotate(45deg);
++++++++content:+"";
++++++++display:+inline-block;
++++}|code-block|syntax|javascript|1471325|<label><input+type="checkbox">+Test</label>|1471326|1471327|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>My reputation is slightly too low to post comments, but I made a modification to Jack Miller's code above in order to get it to not change size when you check and uncheck it. This was causing text alignment problems for me.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    input[type=checkbox] {
        width: 17px;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 17px;
        border: 1px solid black;
    }

    input[type=checkbox]:checked {
        background-color: #F58027;
    }

    input[type=checkbox]:checked:after {
        margin-left: 4px;
        margin-top: -1px;
        width: 4px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
        display: inline-block;
    }
    input[type=checkbox]:after {
        margin-left: 4px;
        margin-top: -1px;
        width: 4px;
        height: 12px;
        border: solid white;
        border-width: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
        display: inline-block;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;&lt;input type="checkbox"&gt; Test&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1686562|text|这应该是可行的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1686563|input+{
++width:+25px;
++height:+25px;
}|code-block|syntax|javascript|1686564|它至少适用于我在Firefox、Chrome和iPhone的Firefox、Chrome和Safari上的应用。|1686565|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This should work</p>
<pre><code>input {
  width: 25px;
  height: 25px;
}
</code></pre>
<p>It worked for me for Firefox and Chrome and iPhone's Firefox, Chrome and Safari at least.</p>


<p>Is it possible to set the size of a checkbox using CSS or HTML across browsers? </p>

<p><code>width</code> and <code>size</code> work in IE6+, but not with Firefox, where the checkbox stays 16x16 even if I set a smaller size.</p>


Can I change the checkbox size using CSS?

jQuery

是否可以使用CSS或HTML跨浏览器设置复选框的大小？width和size可以在IE6+下运行，但不能在火狐上运行，因为即使我设置了更小的尺寸，复选框也会保持为16x16。

问是否可以使用CSS更改复选框大小？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以使用CSS更改复选框大小？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以使用CSS更改复选框大小？
EN