这应该可以

input {
  width: 25px;
  height: 25px;
}

对我来说，火狐浏览器、Chrome浏览器、iPhone的火狐浏览器、Chrome浏览器和Safari浏览器至少都是如此。

它有点丑(由于缩放)，但它适用于大多数更新的浏览器:

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; } <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>

我想做一个复选框，只是稍大一点，并查看37Signals Basecamp的源代码，以找到以下解决方案-

您可以更改字体大小，使复选框略大:

font-size: x-large;

然后，你可以正确对齐复选框，这样做:

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

您可以在下面的代码中更改高度和宽度

.checkmark { 位置:绝对的; 上图:0; 左:0; 高度:20 px; 宽度:20 px; border - radius: 5 px; 边框:1px实体#ff7e02; ｝ < div class = "检查" > <标签类= " container1 " >建筑/景观 <input type="checkbox" checked="checked"> < span class = "勾" > < / span > < / >标签 < / div >

我发现这个css库非常有用: https://lokesh-coder.github.io/pretty-checkbox/

或者，你也可以像@Sharcoux发的帖子那样，用同样的基本概念自己动手。它基本上是:

隐藏正常的复选框(不透明度为0，放在它应该去的地方) 添加一个基于css的假复选框 对选中的样式使用input:checked~div标签 确保你的<label>是可点击的使用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>

预览: 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>