如何使用CSSdevisecheckbox？

我正在尝试使用以下方式设置checkbox的样式：

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

但风格不适用。该checkbox仍然显示其默认样式。我如何给它指定的风格？

更新：下面的答案引用CSS3的广泛可用性之前的状态。在现代浏览器（包括Internet Explorer 9和更高版本）中，使用首选样式创buildcheckboxreplace更为简单，而不使用JavaScript。

这里有一些有用的链接：

用CSS创build自定义表单checkbox
简单的CSScheckbox生成器
你可以用checkbox黑客的东西
用CSS3实现自定义checkbox和单选button
如何使用CSS设置checkbox的样式

值得注意的是，根本问题没有改变。您仍然无法将样式（边框等）直接应用到checkbox元素，并使这些样式影响HTMLcheckbox的显示。然而，改变的是，现在可以隐藏实际的checkbox，并用自己的样式化元素replace它，只使用CSS。特别是，因为CSS现在有一个被广泛支持的:checkedselect器，你可以使你的replace正确地反映出box的检查状态。

更老的答案

这是一个关于造型checkbox的有用的文章。基本上，作者发现，从浏览器到浏览器的变化非常大，许多浏览器总是显示默认的checkbox，不pipe你怎么样。所以真的不是一个简单的方法。

不难想象一个解决方法，您可以使用javascript来覆盖checkbox上的图像，并在该图像上点击导致真正的checkbox被选中。没有javascript的用户会看到默认的checkbox。

编辑添加：这是一个很好的脚本，为你做这个 ; 它隐藏了真正的checkbox元素，用样式化的跨度replace它，并redirect点击事件。

有一种方法可以用css来做到这一点。我们可以（ab）代替使用标签元素和样式。警告的是，这不适用于IE8和更低版本。

CSS：

 .myCheckbox input { // display: none; // Better than display: none for accessibility reasons position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

HTML：

 <label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test"/> <span></span> </label>

通过使用:after和:before伪类中的新function，您可以实现相当酷的自定义checkbox效果。这样做的好处是：您不需要添加任何更多的东西，只是标准的checkbox。

注意，这只适用于兼容的浏览器，我相信这是与一些浏览器不允许你在input元素:after设置:before相关的事实。不幸的是，目前只支持webkit浏览器。 FF + IE仍然可以让checkbox起作用，只是没有样式，这将有希望改变（代码不使用供应商前缀）。

这是一个Webkit浏览器解决scheme（Chrome，Safari，Mobile浏览器）

请参阅示例小提琴

 .myinput[type="checkbox"]:before{ position: relative; display: block; width: 11px; height: 11px; border: 1px solid #808080; content: ""; background: #FFF; } .myinput[type="checkbox"]:after{ position: relative; display: block; left: 2px; top: -11px; width: 7px; height: 7px; border-width: 1px; border-style: solid; border-color: #B3B3B3 #dcddde #dcddde #B3B3B3; content: ""; background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%); background-repeat: no-repeat; background-position:center; } .myinput[type="checkbox"]:checked:after{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%); } .myinput[type="checkbox"]:disabled:after{ -webkit-filter: opacity(0.4); } .myinput[type="checkbox"]:not(:disabled):checked:hover:after{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%); } .myinput[type="checkbox"]:not(:disabled):hover:after{ background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%); border-color: #85A9BB #92C2DA #92C2DA #85A9BB; } .myinput[type="checkbox"]:not(:disabled):hover:before{ border-color: #3D7591; } .myinput.large{ height:22px; width:22px; } .myinput.large[type="checkbox"]:before{ width: 20px; height: 20px; } .myinput.large[type="checkbox"]:after{ top: -20px; width: 16px; height: 16px; } .myinput.large.custom[type="checkbox"]:checked:after{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%); } .myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%); }

奖金Webkit风格flipswitch小提琴

 .flipswitch { position: relative; background: white; width: 120px; height: 40px; -webkit-appearance: initial; border-radius: 3px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline:none; font-size: 14px; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; cursor:pointer; border:1px solid #ddd; } .flipswitch:after { position:absolute; top:5%; display:block; line-height:32px; width:45%; height:90%; background:#fff; box-sizing:border-box; text-align:center; transition: all 0.3s ease-in 0s; color:black; border:#888 1px solid; border-radius:3px; } .flipswitch:after { left:2%; content: "OFF"; } .flipswitch:checked:after { left:53%; content: "ON"; }

开始之前（截至2015年1月）

原来的问题和答案现在〜5岁。因此，这是一个更新的一点点。

首先，在样式checkbox方面有很多方法。基本的宗旨是：

您需要隐藏浏览器设置的默认checkbox控件，并且不能以任何有意义的方式使用CSS重写。
在隐藏控件的情况下，您仍然需要能够检测并切换其检查状态
checkbox的选中状态将需要通过样式化新元素来反映

解决scheme（原则上）

以上可以通过许多方法来完成 – 而且您经常会听到使用CSS3 psuedo元素是正确的方法。实际上，没有真正的对错之分，它取决于最适合上下文的方法。也就是说，我有一个首选的方法。

把你的checkbox包装在一个label元素中。这意味着即使隐藏了，也可以在点击标签内的任意位置时切换其已选状态。
隐藏您的checkbox
checkbox后添加一个新的元素，你将相应的样式。它必须显示在checkbox后面，因此可以使用CSS进行select，并且取决于:checked状态。 CSS不能select“向后”。

解决scheme（在代码中）

 label input { visibility: hidden;/* <-- hide the default checkbox, the rest is to hide and alllow tabbing, which display:none prevents */ display:block; height:0; width:0; position:absolute; overflow:hidden; } label span {/* <-- style the artificial checkbox */ height: 10px; width: 10px; border: 1px solid grey; display: inline-block; } [type=checkbox]:checked + span {/* <-- style its checked state */ background: black; }

 <label> <input type='checkbox'> <span></span> Checkbox label text </label>

你可以使用标签元素稍微弄虚作假的checkbox样式如下：

CSS

 .checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { position: relative; display: block; width: 80px; height: 26px; margin: 0 auto; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { position: absolute; display: inline; right: 10px; content: 'no'; color: #E53935; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox:before { position: absolute; display: inline; left: 10px; content: 'yes'; color: #43A047; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #2E2E2E; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; z-index: 1; } .checkbox input[type=checkbox]:checked + label { left: 43px; }

HTML

 <div class="checkbox"> <input id="checkbox1" type="checkbox" value="1" /> <label for="checkbox1"></label> </div>

上述代码的FIDDLE 。请注意，某些CSS在老版本的浏览器中不起作用，但是我相信这里有一些很棒的JavaScript例子！

我会按照SW4的答案 – 隐藏checkbox，并用自定义跨度来覆盖它，build议这个HTML

 <label> <input type="checkbox"> <span>send newsletter</span> </label>

整齐的标签包装允许点击文本，而不需要“for-id”属性链接。然而，

不要使用`visibility: hidden`隐藏它`visibility: hidden`或`display: none`

它适用于点击或点击，但是这是使用checkbox的一种蹩脚的方式。有些人仍然使用更有效的选项卡来移动焦点，激活空间 ，并用该方法隐藏禁用它。如果表单很长，则会保存某人的手腕以使用tabindex或accesskey属性。如果你观察到系统checkbox的行为，hover就有一个不错的阴影。样式良好的checkbox应该遵循这种行为。

cobberboy的答案build议Font Awesome通常比位图更好，因为字体是可缩放的vector。使用上面的HTML，我会build议这些CSS规则：

1： 隐藏checkbox

 input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }

我只使用负Z指数，因为我的例子使用了足够大的checkbox外观来完全覆盖它。我不build议left: -999px因为它不能在每个布局中重用。 Bushan wagh的答案提供了防弹的方式来隐藏它，并说服浏览器使用tabindex，所以这是一个很好的select。无论如何，这两个只是一个黑客。正确的方式今天是appearance: none ，看到Joost的答案：

 input[type="checkbox"] {appearance:none; -webkit-appearance:none; -moz-appearance:none;}

2： 风格checkbox标签

 input[type="checkbox"]+span { font: 16pt sans-serif; color: #000; }

3： 添加checkbox皮肤

 input[type="checkbox"]+span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }

\00f096是Font Awesome的square-o ，调整填充以提供焦点上的虚线轮廓（请参见下文）

4： 添加checkbox检查皮肤

 input[type="checkbox"]:checked+span:before { content: '\00f046'; }

\00f046是Font Awesome的check-square-o ，它与square-o宽度不一样，这就是上面宽度样式的原因

5： 添加焦点大纲

 input[type="checkbox"]:focus+span:before { outline: 1px dotted #aaa; }

Safari不提供此function（请参阅@Jason Sankey的评论），您应该使用window.navigator来检测浏览器，如果是Safari，则跳过它。

6： 为禁用checkbox设置灰色

 input[type="checkbox"]:disabled+span { color: #999; }

7： 在非禁用checkbox上设置hover阴影

 input[type="checkbox"]:not(:disabled)+span:hover:before { text-shadow: 0 1px 2px #77F; }

演示小提琴

尝试将鼠标hover在checkbox上，然后使用Tab键和Shift + Tab移动空格来切换。

我更喜欢使用图标字体（如fontawesome），因为使用CSS可以很容易地修改它们的颜色，而且在高像素密度设备上可以很好地进行缩放。所以这里是另一个纯粹的CSS变体，使用了类似于上面的技术。

（下面是一个静态图像，所以你可以看到结果;请参阅JSFiddle的交互式版本）

复选框的例子

与其他解决scheme一样，它使用LABEL元素。一个相邻的SPAN拥有我们的checkbox字符。

HTML：

 <span class="bigcheck"> <label class="bigcheck">Cheese <input type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> </label> </span>

CSS：

 span.bigcheck-target { font-family: FontAwesome; /* use an icon font for the checkbox */ } input[type='checkbox'].bigcheck { position: relative; left: -999em; /* hide the real checkbox */ } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */ } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\f046"; /* fontawesome checked box (fa-check-square-o) */ } /* ==== optional - colors and padding to make it look nice === */ body { background-color: #2C3E50; color: #D35400; font-family: sans-serif; font-weight: 500; font-size: 4em; /* set this to whatever size you want */ } span.bigcheck { display: block; padding: 0.5em;; }

这是JSFiddle的。

这是一个相当古老的post，但最近我发现了一个相当有趣的解决scheme的问题。

你可以使用appearance: none; closurescheckbox他的默认样式，然后写你自己的话，就像这里所描述的（例4）。

示例小提琴

不幸的是，浏览器支持从我的个人testing的appearance选项是相当不好的我只有Opera和铬正常工作。但是，如果有更好的支持，或者您只想使用chrome / opera，那么这样做可以保持简单。

“我可以用吗？” 链接

易于实施和轻松定制的解决scheme

经过大量的search和testing，我得到了这个解决scheme，它很容易实现， 在这个解决scheme ：

您不需要外部库和文件
您不需要在页面中添加额外的HTML
您不需要更改checkbox名称和ID

简单地把stream动的CSS放在页面的顶部，所有的checkbox样式将会像这样改变：在这里输入图像描述

 <style> input[type=checkbox] { transform: scale(1.5); } input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 17px; visibility: hidden; } input[type=checkbox]:after { content: " "; background-color: #fff; display: inline-block; margin-left:10px; padding-bottom:5px; color:#00BFF0; width:22px; height:25px; visibility: visible; border:1px solid #00BFF0; padding-left:3px; border-radius:5px; } input[type=checkbox]:checked:after { content: "\2714"; padding:-5px; font-weight:bold; } </style>

您可以避免添加额外的标记。这个工作除了IE浏览器桌面（但适用于Windows Phone和Microsoft Edge的IE），通过设置CSS appearance ：

 input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Styling checkbox */ width: 16px; height: 16px; background-color: red; } input[type="checkbox"]:checked { background-color: green; }

 <input type="checkbox" />

我认为最简单的方法是通过devise标签并使checkbox不可见。

HTML

 <input type="checkbox" id="first" /> <label for="first">&nbsp;</label>

CSS

 checkbox{ display:none; } checkbox + label{ /*Style for checkbox normal*/ width:16px; height:16px; } checkbox::checked + label, label.checked{ /*Style for checkbox checked*/ }

该checkbox即使被隐藏也仍然可以访问，并且在提交表单时将会发送该值。对于旧的浏览器，你可能不得不改变标签的类来检查使用JavaScript，因为我不认为老版本的IE理解::checked checkbox

哎呀！所有这些解决方法使我得出的结论是，HTMLcheckbox有点糟糕，如果你想风格。

作为一个预警，这不是一个css实现。我只是认为我会分享我提出的解决方法，以防其他人可能会觉得有用。

我使用了HTML5 canvas元素。

这样做的好处是你不必使用外部图像，可以节省一些带宽。

缺点是，如果浏览器由于某种原因无法正确渲染，那就没有后备。虽然这是否在2017年仍然是一个问题是值得商榷的。

更新

我发现旧代码相当丑陋，所以我决定给它一个重写。

 Object.prototype.create = function(args){ var retobj = Object.create(this); retobj.constructor(args || null); return retobj; } var Checkbox = Object.seal({ width: 0, height: 0, state: 0, document: null, parent: null, canvas: null, ctx: null, /* * args: * name default desc. * * width 15 width * height 15 height * document window.document explicit document reference * target this.document.body target element to insert checkbox into */ constructor: function(args){ if(args === null) args = {}; this.width = args.width || 15; this.height = args.height || 15; this.document = args.document || window.document; this.parent = args.target || this.document.body; this.canvas = this.document.createElement("canvas"); this.ctx = this.canvas.getContext('2d'); this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.addEventListener("click", this.ev_click(this), false); this.parent.appendChild(this.canvas); this.draw(); }, ev_click: function(self){ return function(unused){ self.state = !self.state; self.draw(); } }, draw_rect: function(color, offset){ this.ctx.fillStyle = color; this.ctx.fillRect(offset, offset, this.width - offset * 2, this.height - offset * 2); }, draw: function(){ this.draw_rect("#CCCCCC", 0); this.draw_rect("#FFFFFF", 1); if(this.is_checked()) this.draw_rect("#000000", 2); }, is_checked: function(){ return !!this.state; } });

这是一个工作演示。

新版本使用原型和差分inheritance来创build用于创buildcheckbox的高效系统。要创build一个checkbox：

 var my_checkbox = Checkbox.create();

这将立即将checkbox添加到DOM并挂接事件。要查询checkbox是否被选中：

 my_checkbox.is_checked(); // true if checked, else false

还要注意的是，我摆脱了循环。

更新2

上次更新中我忽略的一点是，使用canvas比仅仅制作checkbox看起来更有优势。如果您愿意，也可以创build多状态checkbox。

 Object.prototype.create = function(args){ var retobj = Object.create(this); retobj.constructor(args || null); return retobj; } Object.prototype.extend = function(newobj){ var oldobj = Object.create(this); for(prop in newobj) oldobj[prop] = newobj[prop]; return Object.seal(oldobj); } var Checkbox = Object.seal({ width: 0, height: 0, state: 0, document: null, parent: null, canvas: null, ctx: null, /* * args: * name default desc. * * width 15 width * height 15 height * document window.document explicit document reference * target this.document.body target element to insert checkbox into */ constructor: function(args){ if(args === null) args = {}; this.width = args.width || 15; this.height = args.height || 15; this.document = args.document || window.document; this.parent = args.target || this.document.body; this.canvas = this.document.createElement("canvas"); this.ctx = this.canvas.getContext('2d'); this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.addEventListener("click", this.ev_click(this), false); this.parent.appendChild(this.canvas); this.draw(); }, ev_click: function(self){ return function(unused){ self.state = !self.state; self.draw(); } }, draw_rect: function(color, offsetx, offsety){ this.ctx.fillStyle = color; this.ctx.fillRect(offsetx, offsety, this.width - offsetx * 2, this.height - offsety * 2); }, draw: function(){ this.draw_rect("#CCCCCC", 0, 0); this.draw_rect("#FFFFFF", 1, 1); this.draw_state(); }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); }, is_checked: function(){ return this.state == 1; } }); var Checkbox3 = Checkbox.extend({ ev_click: function(self){ return function(unused){ self.state = (self.state + 1) % 3; self.draw(); } }, draw_state: function(){ if(this.is_checked()) this.draw_rect("#000000", 2, 2); if(this.is_partial()) this.draw_rect("#000000", 2, (this.height - 2) / 2); }, is_partial: function(){ return this.state == 2; } });

我稍微修改了最后一个代码片段中使用的Checkbox ，使其更加通用，使得可以使用具有3个状态的checkbox“扩展”checkbox。这是一个演示。正如你所看到的，它已经比内置checkbox有更多的function。

在JavaScript和CSS之间进行select时需要考虑的事项。

旧的，devise不佳的代码

工作演示

首先，设置一个canvas

 var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), checked = 0; // The state of the checkbox canvas.width = canvas.height = 15; // Set the width and height of the canvas document.body.appendChild(canvas); document.body.appendChild(document.createTextNode(' Togglable Option'));

接下来，devise一种让canvas更新的方法。

 (function loop(){ // Draws a border ctx.fillStyle = '#ccc'; ctx.fillRect(0,0,15,15); ctx.fillStyle = '#fff'; ctx.fillRect(1,1,13,13); // Fills in canvas if checked if(checked){ ctx.fillStyle = '#000'; ctx.fillRect(2,2,11,11); } setTimeout(loop,1000/10); // refresh 10 times per second })();

最后一部分是使其互动。幸运的是，这很简单：

 canvas.onclick = function(){ checked = !checked; }

这是你可能在IE浏览器中遇到问题的地方，因为他们在JavaScript中使用了奇怪的事件处理模型。

我希望这有助于某人，这绝对适合我的需求。

这里是一个简单的CSS解决scheme没有jQuery或JavaScript

我正在使用字体awseome图标，但您可以使用任何图像

 input[type=checkbox] { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; visibility: hidden; font-size: 14px; } input[type=checkbox]:before { content: @fa-var-square-o; visibility: visible; //font-size: 12px; } input[type=checkbox]:checked:before{ content: @fa-var-check-square-o; }

不需要JavaScript或Jquery 。

改变你的checkbox样式简单的方法。

HTML

 <input type="checkbox" id="option"/> <label for="option"> <span></span> Click me </label>

CSS

 input[type="checkbox"]{ display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(uncheck.png); width: 49px; height: 49px; vertical-align: middle; }

这里是JS小提琴链接： https ： //jsfiddle.net/05y2bge3/

警告：撰写本文时以下情况属实，但与此同时事情已经进展。

AFAIK现代浏览器使用本地操作系统控件显示checkbox，因此无法对它们进行样式设置。

用普通的css3修改checkbox样式，不需要任何js和html操作。

 .form input[type="checkbox"]:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; content:"\f096"; opacity:1 !important; margin-top:-25px; appearance:none; background:#fff; } .form input[type="checkbox"]:checked:before{ content:"\f046"; } .form input[type="checkbox"]{ font-size:22px;appearance:none; -webkit-appearance:none; -moz-appearance:none; }

 <link href="font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <form class="form"> <input type="checkbox"/> </form>

A simple and lightweight template as well:

 input[type=checkbox]{ cursor: pointer; } input[type=checkbox]:checked:before { content: "\2713"; background: #fffed5; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } input[type=checkbox]:before { content: "\202A"; background: #ffffff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; }

 <input type="checkbox" checked="checked">checked1<br> <input type="checkbox">unchecked2<br> <input type="checkbox" checked="checked" id="id1"> <label for="id1">checked2+label</label><br> <label for="id2">unchecked2+label+rtl</label> <input type="checkbox"id="id2"> <br>

 input[type=checkbox].css-checkbox { position: absolute; overflow: 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 { padding-left:20px; height:15px; display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; } .css-label{ background-image:url(checkboxes/dark-check-green.png); }

No, you still can't style the checkbox itself, but I (finally) figured out how to style an illusion while keeping the functionality of clicking a checkbox. It means that you can toggle it even if the cursor isn't perfectly still without risking selecting text or triggering drag-and-drop!

This solution probably also fits radio buttons.

The following works in IE9, FF30.0 and Chrome 40.0.2214.91 and is just a basic example. You can still use it in combination with background images and pseudo-elements.

http://jsfiddle.net/o0xo13yL/1/

 label { display: inline-block; position: relative; /* needed for checkbox absolute positioning */ background-color: #eee; padding: .5rem; border: 1px solid #000; border-radius: .375rem; font-family: "Courier New"; font-size: 1rem; line-height: 1rem; } label > input[type="checkbox"] { display: block; position: absolute; /* remove it from the flow */ width: 100%; height: 100%; margin: -.5rem; /* negative the padding of label to cover the "button" */ cursor: pointer; opacity: 0; /* make it transparent */ z-index: 666; /* place it on top of everything else */ } label > input[type="checkbox"] + span { display: inline-block; width: 1rem; height: 1rem; border: 1px solid #000; margin-right: .5rem; } label > input[type="checkbox"]:checked + span { background-color: #666; } <label> <input type="checkbox" /> <span>&nbsp;</span>Label text </label>

Here is a CSS/HTML only version, no Jquery or Javascript needed at all, Simple and clean html and really simple and short css.

here is the JSFiddle

http://jsfiddle.net/v71kn3pr/

Here is the HTML

 <div id="myContainer"> <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" /> <label for="myCheckbox_01_item" class="box"></label> <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label> </div>

Here is the CSS

 #myContainer { outline: black dashed 1px; width: 200px; } #myContainer input[type="checkbox"][name="myCheckbox"] { display: none; } #myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box { display: inline-block; width: 25px; height: 25px; border: black solid 1px; background: #FFF ; margin: 5px 5px; } #myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box { display: inline-block; width: 25px; height: 25px; border: black solid 1px; background: #F00; margin: 5px 5px; } #myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text { font: normal 12px arial; display: inline-block; line-height: 27px; vertical-align: top; margin: 5px 0px; }

This can be adapted to be able to have individual radio or checkboxes, grooups of checkboxes and groups of radio buttons as well.

This html/css, will allow you to also capture click on the label, so the checkbox will be checked and unchecked even if you click just on the label.

This type of checkbox/radio button works perfectly with any form, no problem at all. Have been tested using php, aspx, javafaces and coldfusion too.

This is simplest way and you can choose which checkeboxes to give this style.

CSS：

 .check-box input { display: none; } .check-box span:before { content: ' '; width: 20px; height: 20px; display: inline-block; background: url("unchecked.png"); } .check-box input:checked + span:before { background: url("checked.png"); }

HTML：

 <label class="check-box"> <input type="checkbox"> <span>Check box Text</span> </label>

Since browsers like edge and firefox do not support :before :after on checkbox input tags, here is an alternative purely with html and css. Ofcourse you should edit css according to your requirements.

Make the html for checkbox like this:

 <div class='custom-checkbox'> <input type='checkbox' /> <label> <span></span> Checkbox label </label> </div>

Apply this style for the checkbox to change the color label

 <style> .custom-checkbox { position: relative; } .custom-checkbox input{ position: absolute; left: 0; top: 0; height:15px; width: 50px; /* Expand the checkbox so that it covers */ z-index : 1; /* the label and span, increase z-index to bring it over */ opacity: 0; /* the label and set opacity to 0 to hide it. */ } .custom-checkbox input+label { position: relative; left: 0; top: 0; padding-left: 25px; color: black; } .custom-checkbox input+label span { position: absolute; /* a small box to display as checkbox */ left: 0; top: 0; height: 15px; width: 15px; border-radius: 2px; border: 1px solid black; background-color: white; } .custom-checkbox input:checked+label { /* change label color when checked */ color: orange; } .custom-checkbox input:checked+label span{ /* change span box color when checked */ background-color: orange; border: 1px solid orange; } </style>

You can use iCheck it is customized checkboxes and radio buttons for jQuery & Zepto, maybe it will help you

Make sure jQuery v1.7+ is loaded before the icheck.js

Choose a color scheme, there are 10 different styles available:
- Black — minimal.css
- Red — red.css
- Green — green.css
- Blue — blue.css
- Aero — aero.css
- Grey — grey.css
- Orange — orange.css
- Yellow — yellow.css
- Pink — pink.css
- Purple — purple.css
Copy /skins/minimal/ folder and icheck.js file to your site.
Insert before in your HTML (replace your-path and color-scheme):

Example for a Red color scheme:

 <link href="your-path/minimal/red.css" rel="stylesheet"> <script src="your-path/icheck.js"></script>

Add some checkboxes and radio buttons to your HTML:

Add JavaScript to your HTML to launch iCheck plugin:

 <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal', increaseArea: '20%' // optional }); }); </script>

For different from black color schemes use this code (example for Red):

 <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', radioClass: 'iradio_minimal-red', increaseArea: '20%' // optional }); }); </script>

完成

quick-fix to add icon in front of text:

 < asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />

如何使用CSSdevisecheckbox？

开始之前（截至2015年1月）

解决scheme（原则上）

解决scheme（在代码中）

不要使用`visibility: hidden`隐藏它`visibility: hidden`或`display: none`

演示小提琴

易于实施和轻松定制的解决scheme

更新

更新2

旧的，devise不佳的代码

更改Android的checkbox已选中或未选中的图标

如何在没有checkbox的情况下在listview中显示已安装的应用程序列表在列表视图滚动时未被选中？

如何从ListView中获取所有选中的项目？

包含HTML中checkbox列表的可滚动框

设置“检查”的checkbox与jQuery？

html只select一个组中的一个checkbox

如何在ASP.NET表单上创buildcheckbox？

如何在swift（iOS）中创build单选button和checkbox？

网页中的checkbox – 如何让它们更大？

HTML / CSS中的收音机/checkboxalignment方式

如何使用CSSdevisecheckbox？

开始之前（截至2015年1月）

解决scheme（原则上）

解决scheme（在代码中）

不要使用visibility: hidden隐藏它visibility: hidden或display: none

演示小提琴

易于实施和轻松定制的解决scheme

更新

更新2

旧的，devise不佳的代码

更改Android的checkbox已选中或未选中的图标

如何在没有checkbox的情况下在listview中显示已安装的应用程序列表在列表视图滚动时未被选中？

如何从ListView中获取所有选中的项目？

包含HTML中checkbox列表的可滚动框

设置“检查”的checkbox与jQuery？

html只select一个组中的一个checkbox

如何在ASP.NET表单上创buildcheckbox？

如何在swift（iOS）中创build单选button和checkbox？

网页中的checkbox – 如何让它们更大？

HTML / CSS中的收音机/checkboxalignment方式

不要使用`visibility: hidden`隐藏它`visibility: hidden`或`display: none`