如何使用 CSS 设置复选框的样式

更新：

下面的答案引用了 CSS 3 广泛可用之前的状态。在现代浏览器（包括 Internet Explorer 9 及更高版本）中，使用您喜欢的样式创建复选框替换更为直接，而无需使用 JavaScript。

以下是一些有用的链接：

仅使用 CSS 创建自定义表单复选框

简单的 CSS 复选框生成器

你可以用 Checkbox Hack 做的事情

使用 CSS3 实现自定义复选框和单选按钮

如何使用 CSS 设置复选框的样式

值得注意的是，根本问题没有改变。您仍然不能将样式（边框等）直接应用于复选框元素，并且这些样式会影响 HTML 复选框的显示。然而，改变的是现在可以隐藏实际的复选框并用您自己的样式元素替换它，只使用 CSS。特别是，因为 CSS 现在有一个广泛支持的 :checked 选择器，您可以使您的替换正确地反映该框的选中状态。

较早的答案

这是a useful article about styling checkboxes。基本上，该作者发现它因浏览器而异，而且许多浏览器总是显示默认复选框，无论您如何设置它。所以真的没有一个简单的方法。

不难想象一种解决方法，您可以使用 JavaScript 在复选框上叠加图像，然后单击该图像会导致选中真正的复选框。没有 JavaScript 的用户会看到默认复选框。

编辑添加：这里是 a nice script that does this for you;它隐藏了真正的复选框元素，将其替换为样式跨度，并重定向点击事件。

---

通过使用 :after 和 :before 伪类附带的新功能，您可以实现非常酷的自定义复选框效果。这样做的好处是：您不需要向 DOM 添加任何内容，只需添加标准复选框即可。

请注意，这仅适用于兼容的浏览器。我相信这与某些浏览器不允许您在输入元素上设置 :after 和 :before 的事实有关。不幸的是，这意味着目前仅支持 WebKit 浏览器。 Firefox + Internet Explorer 仍将允许复选框起作用，只是未设置样式，这有望在未来发生变化（代码不使用供应商前缀）。

这只是一个 WebKit 浏览器解决方案（Chrome、Safari、移动浏览器）

See Example Fiddle

$(function() { $('input').change(function() { $('div').html(Math.random()); }); }); /* 主要类 */ .myinput[type="checkbox"]:before { position: relative;显示：块；宽度：11px；高度：11px；边框：1px 实心 #808080;内容： ””;背景：#FFF； } .myinput[type="checkbox"]:after { position: relative;显示：块；左：2px；顶部：-11px；宽度：7px；高度：7px；边框宽度：1px；边框样式：实心；边框颜色：#B3B3B3 #dcddde #dcddde #B3B3B3;内容： ””;背景图像：线性渐变（135度，#B1B6BE 0%，#FFF 100%）；背景重复：不重复；背景位置：中心； } .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'), 线性梯度(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'), 线性梯度(135deg, #8BB0C2 0%, #FFF 100%); } .myinput[type="checkbox"]:not(:disabled):hover:after { background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);边框颜色：#85A9BB #92C2DA #92C2DA #85A9BB； } .myinput[type="checkbox"]:not(:disabled):hover:before { 边框颜色：#3D7591; } /* 大复选框 */ .myinput.large { height: 22px;宽度：22px； } .myinput.large[type="checkbox"]:before { width: 20px;高度：20px； } .myinput.large[type="checkbox"]:after { top: -20px;宽度：16px；高度：16px； } /* 自定义复选框 */ .myinput.large.custom[type="checkbox"]:checked:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8wA/ /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/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVUQ4y2P4 +OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); }

正常：
小：
Large:
自定义图标：

Bonus Webkit style flipswitch fiddle

$(function() { var f = function() { $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)' ); }; $('input').change(f).trigger('change'); });正文 { 字体系列：宋体； } .flipswitch { 位置：相对；背景：白色；宽度：120px；高度：40px； -webkit-外观：初始；边框半径：3px； -webkit-tap-highlight-color: rgba(0, 0, 0, 0);大纲：无；字体大小：14px；字体系列：Trebuchet、Arial、无衬线字体；字体粗细：粗体；光标：指针；边框：1px 实心#ddd； } .flipswitch:after { 位置：绝对；前5％;显示：块；行高：32px；宽度：45%；高度：90%；背景：#fff; box-sizing：边框框；文本对齐：居中；过渡：所有 0.3s 缓入 0s；颜色：黑色;边框：#888 1px 实心；边框半径：3px； } .flipswitch:after { left: 2%;内容：“关闭”； } .flipswitch:checked:after { left: 53%;内容：“开”； }

Webkit 友好的移动式复选框/flipswitch  
 

---

Firefox 33.1/Linux：小提琴只显示默认复选框。没有什么不同。

@robsch 这在原始帖子中明确指出。火狐或操作系统的版本无关紧要，它在火狐中不起作用。 “FF + IE 仍然允许复选框起作用，只是没有样式......”

一个很好的方法。但并非所有浏览器都做得很好。据我检查，只有 Chrome 的输出最好。

非常好。但是...这又是一种 IE 5.x 方法。仅限 Webkit。因为它并不总是遵守规则……这就是 webkit 浏览器的全部问题。

我在 Win 上也获得了 Firefox 58 和 IE11 中的默认复选框。

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

最初的问题和答案现在已经有 5 年的历史了。因此，这是一个小小的更新。

首先，在样式复选框方面有多种方法。基本原则是：

您将需要隐藏由浏览器设置样式的默认复选框控件，并且不能使用 CSS 以任何有意义的方式覆盖。隐藏控件后，您仍然需要能够检测和切换其选中状态。复选框的选中状态需要通过设置新元素的样式来反映。

解决方案（原则上）

以上可以通过多种方式实现——你经常会听到使用 CSS3 伪元素是正确的方法。实际上，没有真正的正确或错误的方法，这取决于最适合您将使用它的上下文的方法。也就是说，我有一个首选的方法。

将您的复选框包装在标签元素中。这意味着即使它被隐藏，您仍然可以通过单击标签内的任意位置来切换其选中状态。隐藏您的复选框。在复选框之后添加一个新元素，您将相应地设置样式。它必须出现在复选框之后，以便可以使用 CSS 选择它并根据 :checked 状态设置样式。 CSS 不能选择“向后”。

解决方案（代码中）

label input { visibility: hidden;/* <-- 隐藏默认复选框。剩下的就是隐藏和允许跳格，其中 display:none 阻止 */ display: block;高度：0；宽度：0；位置：绝对；溢出：隐藏； } label span {/* <-- 设置人工复选框的样式 */ height: 10px;宽度：10px；边框：1px 纯灰色；显示：内联块； } [type=checkbox]:checked + span {/* <-- 设置选中状态 */ background: black; } 复选框标签文本

细化（使用图标）

“但是，嘿！”我听到你喊。如果我想在框中显示一个漂亮的小勾号或十字怎么办？而且我不想使用背景图片！

嗯，这就是 CSS3 的伪元素可以发挥作用的地方。这些支持 content 属性，它允许您注入代表任一状态的 Unicode icons。或者，您可以使用第三方字体图标源，例如 font awesome（但请确保您还设置了相关的 font-family，例如设置为 FontAwesome）

标签输入{显示：无； /* 隐藏默认复选框 */ } /* 设置人工复选框的样式 */ label span { height: 10px;宽度：10px；边框：1px 纯灰色；显示：内联块；位置：相对； } /* 设置它的选中状态...带有勾选图标 */ [type=checkbox]:checked + span:before { content: '\2714';位置：绝对；顶部：-5px；左：0； } 复选框标签文本

---

有一种方法可以只使用 CSS。我们可以（ab）使用 label 元素并设置该元素的样式。需要注意的是，这不适用于 Internet Explorer 8 和更低版本。

.myCheckbox 输入 { 位置：相对； z 指数：-9999； } .myCheckbox 跨度 { 宽度：20px;高度：20px；显示：块；背景： url("link_to_image"); } .myCheckbox 输入：checked + span { 背景：url("link_to_another_image"); } 我的样式“复选框”的标签 < /标签>

---

我总是使用伪元素 :before 和 :after 来更改复选框和单选按钮的外观。它就像一个魅力。

有关详细信息，请参阅此 link

CODEPEN

脚步

使用 CSS 规则隐藏默认复选框，例如可见性：隐藏或不透明度：0 或位置：绝对；左：-9999px 等。使用 :before 元素创建一个假复选框，并传递一个空白或不间断空格 '\00a0';当checkbox处于:checked状态时，传入unicode内容：“\2713”，为勾号；添加 :focus 样式以使复选框可访问。完毕

这是我的做法。

.box { 背景：#666666;颜色：#ffffff；宽度：250px；填充：10px；保证金：1em自动； } p { 边距：1.5em 0;填充：0； } 输入[type="checkbox"] { 可见性：隐藏； } 标签 { 光标：指针； } input[type="checkbox"] + label:before {border: 1px solid #333;内容：“\00a0”；显示：内联块；字体：16px/1em 无衬线；高度：16px；边距：0 .25em 0 0；填充：0；垂直对齐：顶部；宽度：16px； } input[type="checkbox"]:checked + label:before { background: #fff;颜色：#333；内容：“\2713”；文本对齐：居中； } input[type="checkbox"]:checked + label:after { font-weight: bold; } input[type="checkbox"]:focus + label::before { 大纲: rgb(59, 153, 252) auto 5px; }

使用 :before 和 :after 更时尚

正文{字体系列：无衬线； } .container { 边距顶部：50px;左边距：20px；右边距：20px； } .checkbox { 宽度：100%;边距：15px 自动；位置：相对；显示：块； } .checkbox 输入[type="checkbox"] { 宽度：自动；不透明度：0.00000001；位置：绝对；左：0；左边距：-20px； } .checkbox 标签 { 位置：相对； } .checkbox 标签：之前 { 内容：'';位置：绝对；左：0；顶部：0；边距：4px；宽度：22px；高度：22px；过渡：变换0.28s缓动；边框半径：3px；边框：2px 实心#7bbe72； } .checkbox label:after { content: '';显示：块；宽度：10px；高度：5px；边框底部：2px 实心#7bbe72；左边框：2px 实心#7bbe72； -webkit-transform：旋转（-45deg）比例（0）；变换：旋转（-45度）缩放（0）；过渡：变换缓动0.25s； will-change：变换；位置：绝对；顶部：12px；左：10px； } .checkbox 输入[type="checkbox"]:checked ~ label::before { color: #7bbe72; } .checkbox input[type="checkbox"]:checked ~ label::after { -webkit-transform: rotate(-45deg) scale(1);变换：旋转（-45度）比例（1）； } .checkbox 标签 { 最小高度：34px;显示：块； padding-left: 40px;边距底部：0；字体粗细：正常；光标：指针；垂直对齐：子； } .checkbox 标签跨度 { 位置：绝对；最高：50%； -webkit-transform: translateY(-50%);变换：translateY（-50%）； } .checkbox input[type="checkbox"]:focus + label::before {outline: 0; }

---

2022 无障碍解决方案 - 使用强调色

使用新的 accent-color 属性并确保满足至少 3:1 的适当 contrast ratio 以确保 accessibility。这也适用于 radio 按钮。

.red-input { 强调色：#9d3039;高度：20px； /* 不需要 */ 宽度：20px; /* 不需要 */ }

---

我会听从 SW4's answer 的建议。不再是：Volomike's answer 远远优于此处的所有答案（请注意我在对答案的评论中建议的改进）。如果您对替代方法感到好奇，请继续阅读此答案，该答案对此进行了评论。

首先，隐藏复选框并用自定义跨度覆盖它，建议使用以下 HTML：

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

标签中的换行巧妙地允许单击文本而无需“for-id”属性链接。然而，

不要使用可见性隐藏它：隐藏或显示：无

它通过单击或点击来工作，但这是使用复选框的一种蹩脚的方式。有些人仍然使用更有效的 Tab 来移动焦点，Space 来激活，使用该方法隐藏会禁用它。如果表单很长，将保存某人的手腕以使用 tabindex 或 accesskey 属性。如果您观察系统复选框的行为，悬停时会有一个不错的阴影。样式良好的复选框应遵循此行为。

cobberboy's answer 推荐 Font Awesome，它通常比位图更好，因为字体是可缩放的矢量。使用上面的 HTML，我建议使用这些 CSS 规则：

隐藏复选框 input[type="checkbox"] { position: absolute;不透明度：0； z 指数：-1；我只使用负 z-index，因为我的示例使用了足够大的复选框皮肤来完全覆盖它。我不推荐 left: -999px 因为它不能在每个布局中重复使用。 Bushan wagh 的回答提供了一种防弹方法来隐藏它并说服浏览器使用 tabindex，因此它是一个不错的选择。无论如何，两者都只是一个黑客。今天正确的方法是外观：无，请参阅 Joost 的回答：input[type="checkbox"] {外观：无； -webkit 外观：无； -moz 外观：无； } 样式复选框标签 input[type="checkbox"] + span { font: 16pt sans-serif;颜色：#000； } 添加复选框皮肤 input[type="checkbox"] + span:before { font: 16pt FontAwesome;内容：'\00f096';显示：内联块；宽度：16pt；填充：2px 0 0 3px；右边距：0.5em； }

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

添加复选框选中皮肤 input[type="checkbox"]:checked + span:before { content: '\00f046'; }

\00f046是Font Awesome的check-square-o，和square-o的宽度不一样，这也是上面宽度样式的原因。

添加焦点轮廓 input[type="checkbox"]:focus + span:before { outline: 1px dotted #aaa; Safari 不提供此功能（请参阅@Jason Sankey 的评论），请参阅此答案 Safari-only CSS Set gray color for disabled checkbox input[type="checkbox"]:disabled + span { color: #999;在未禁用的复选框上设置悬停阴影 input[type="checkbox"]:not(:disabled) + span:hover:before { text-shadow: 0 1px 2px #77F; }

在 JS Fiddle 上进行测试

尝试将鼠标悬停在复选框上，然后使用 Tab 和 Shift+Tab 进行移动，使用 Space 进行切换。

---

使用纯 CSS，:before 和 :after 没有什么花哨的，没有变换，您可以关闭默认外观，然后使用内联背景图像对其进行样式设置，如下例所示。这适用于 Chrome、Firefox、Safari 和现在的 Edge (Chromium Edge)。

INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { 背景颜色：#DDD;边框半径：2px；外观：无； -webkit 外观：无； -moz 外观：无；宽度：17px；高度：17px；光标：指针；位置：相对；顶部：5px； } INPUT[type=checkbox]:checked { background-color: #409fd6;背景：#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px 无重复； }

我同意条款 &条件

---

CSS Basic User Interface Module Level 4（最终）通过一个名为 accent-color 的新解决方案添加了对此的支持，它实际上非常简单，与这里的几乎所有其他答案不同：

输入{强调色：rebeccapurple； }

只需将您想要的任何 CSS 颜色（例如命名值、十六进制代码等）设置为 accent-color 的值，它就会被应用。

这目前适用于 Chrome (v93+)、Edge (v93+)、Firefox (v92+)、Opera (v79+) 和 Safari (v15.4+)。

注意：Edge、Chrome 和 Opera（可能还有 Safari；我无法测试）目前也不支持通过 rgba() 的 alpha 通道值（rgba() 的 RGB 值仍然“有效”；alpha 通道将被浏览器忽略）。有关详细信息，请参阅 MDN Browser Support。

---

易于实施且易于定制的解决方案

经过大量搜索和测试后，我得到了这个易于实施且易于定制的解决方案。在此解决方案中：

您不需要外部库和文件您不需要在页面中添加额外的 HTML 您不需要更改复选框名称和 id

简单地将流动的 CSS 放在页面顶部，所有复选框样式将更改如下：

https://i.stack.imgur.com/hclvc.jpg

输入[类型=复选框] { 变换：比例（1.5）； } 输入[类型=复选框] { 宽度：30 像素；高度：30px；右边距：8px；光标：指针；字体大小：17px；可见性：隐藏； } input[type=checkbox]:after, input[type=checkbox]::after { content: " ";背景颜色：#fff；显示：内联块；左边距：10px；底部填充：5px；颜色：#00BFF0；宽度：22px；高度：25px；能见度：可见；边框：1px 实心#00BFF0；填充左：3px；边框半径：5px； } 输入[type=checkbox]:checked:after, input[type=checkbox]:checked::after { 内容: "\2714";填充：-5px；字体粗细：粗体； } 复选框

---

您可以使用 label 元素为复选框设置样式，示例如下：

.checkbox > input[type=checkbox] { 可见性：隐藏； } .checkbox { 位置：相对；显示：块；宽度：80px；高度：26px；边距：0 自动；背景：#FFF；边框：1px 实心#2E2E2E；边框半径：2px； -webkit-border-radius：2px； -moz-边界半径：2px； } .checkbox:after { 位置：绝对；显示：内联；右：10px；内容：'不'；颜色：#E53935；字体：12px/26px Arial，无衬线；字体粗细：粗体；文本转换：大写； z-index：0； } .checkbox:before { 位置：绝对；显示：内联；左：10px；内容：'是'；颜色：#43A047；字体：12px/26px Arial，无衬线；字体粗细：粗体；文本转换：大写； z-index：0； } .checkbox 标签 { 位置：绝对；显示：块；顶部：3px；左：3px；宽度：34px；高度：20px；背景：#2E2E2E；光标：指针；过渡：全0.5s线性； -webkit-transition：所有 0.5s 线性； -moz-transition：所有 0.5s 线性；边框半径：2px； -webkit-border-radius：2px； -moz-边界半径：2px； z-index：1； } .checkbox input[type=checkbox]:checked + label { left: 43px; }

以及上述代码的 FIDDLE。请注意，某些 CSS 在旧版本的浏览器中不起作用，但我确信那里有一些精美的 JavaScript 示例！

---

您可以避免添加额外的标记。这适用于除 IE 以外的任何地方，通过设置 CSS appearance：

输入[type="checkbox"] { -webkit-appearance: none; -moz 外观：无；外观：无； /* 样式复选框 */ width: 16px;高度：16px；背景颜色：红色； } 输入[type="checkbox"]:checked { 背景颜色：绿色； }

---

最近我发现了一个非常有趣的解决方案。

您可以使用 appearance: none; 关闭复选框的默认样式，然后像 here (Example 4) 中描述的那样在上面写下您自己的样式。

输入[类型=复选框] {宽度：23px；高度：23px； -webkit 外观：无； -moz 外观：无；外观：无；右边距：10px；背景颜色：#878787；大纲：0；边框：0；显示：内联块； -webkit-box-shadow：无！重要； -moz-box-shadow：无！重要；盒子阴影：无！重要； } 输入[类型=复选框]：焦点 { 大纲：无；边框：无！重要； -webkit-box-shadow：无！重要； -moz-box-shadow：无！重要；盒子阴影：无！重要； } 输入[type=checkbox]:checked { 背景颜色：绿色；文本对齐：居中；行高：15px； } <输入类型="复选框">

不幸的是，浏览器对 appearance 选项的支持非常糟糕。根据我的个人测试，我只让 Opera 和 Chrome 正常工作。但是，当更好的支持出现或者您只想使用 Chrome/Opera 时，这将是保持简单的方法。

Example JSFiddle

"Can I use?" link

---

我更喜欢使用图标字体（例如 FontAwesome），因为使用 CSS 很容易修改它们的颜色，而且它们在高像素密度设备上的缩放效果非常好。所以这是另一个纯 CSS 变体，使用与上述类似的技术。

（下面是一张静态图片，您可以将结果可视化；请参阅 the JSFiddle 了解交互式版本。）

https://i.stack.imgur.com/j6zdx.png

与其他解决方案一样，它使用 label 元素。相邻的 span 包含我们的复选框字符。

span.bigcheck-target { font-family: FontAwesome; /* 为复选框使用图标字体 */ } input[type='checkbox'].bigcheck { position: relative;左：-999em； /* 隐藏真正的复选框 */ } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\f096"; /* 在 fontawesome 中，是一个开放的正方形 (fa-square-o) */ } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\f046"; /* fontawesome 复选框 (fa-check-square-o) */ } /* ==== 可选 - 颜色和填充使它看起来不错 === */ body { background-color: #2C3E50;颜色：#D35400；字体系列：无衬线；字体粗细：500；字体大小：4em； /* 将此设置为您想要的任何大小 */ } span.bigcheck { display: block;填充：0.5em； } 奶酪

这是它的 JSFiddle。

---

我的解决方案

输入[type="checkbox"] { 光标：指针； -webkit 外观：无； -moz 外观：无；外观：无；大纲：0；背景：浅灰色；高度：16px；宽度：16px；边框：1px 纯白色； } 输入[type="checkbox"]:checked { 背景: #2aa1c0; } 输入[type="checkbox"]:hover { 过滤器: 亮度(90%); } 输入[type="checkbox"]:disabled { 背景：#e6e6e6;不透明度：0.6；指针事件：无； } input[type="checkbox"]:after { content: '';位置：相对；左：40%；最高：20%；宽度：15%；高度：40%；边框：实心#fff；边框宽度：0 2px 2px 0；变换：旋转（45度）；显示：无； } input[type="checkbox"]:checked:after { display: block; } 输入[type="checkbox"]:disabled:after { 边框颜色: #7b7b7b; }

---

您可以在现代浏览器上简单地使用 appearance: none，这样就没有默认样式并且您的所有样式都会正确应用：

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

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

---

这是一个简单的 CSS 解决方案，没有任何 jQuery 或 JavaScript 代码。

我正在使用 FontAwseome 图标，但您可以使用任何图像

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

---

根据我的谷歌搜索，这是复选框样式的最简单方法。只需根据您的设计添加 :after 和 :checked:after CSS。

身体{背景：#DDD; } span{ 左边距：30px; } 输入[类型=复选框] { 光标：指针；字体大小：17px；可见性：隐藏；位置：绝对；顶部：0；左：0；变换：比例（1.5）； } input[type=checkbox]:after { content: " ";背景颜色：#fff；显示：内联块；颜色：#00BFF0；宽度：14px；高度：19px；能见度：可见；边框：1px 实心#FFF；填充：0 3px；边距：2px 0；边框半径：8px；盒子阴影：0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16); } input[type=checkbox]:checked:after { content: "\2714";显示：未设置；字体粗细：粗体； } 选择文本

---

哎呀！所有这些变通方法都让我得出结论，如果你想给它设置样式，HTML 复选框有点糟糕。

作为预警，这不是 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;
    }
});

这是一个working demo。

新版本使用原型和差异继承来创建用于创建复选框的高效系统。要创建一个复选框：

var my_checkbox = Checkbox.create();

这将立即将复选框添加到 DOM 并连接事件。查询复选框是否被选中：

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

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

更新 2

我在上次更新中没有提到的一点是，使用画布比制作一个看起来像你想要它看起来的复选框更有优势。如果您愿意，您还可以创建多状态复选框。

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 个状态的复选框“扩展”它。这是a demo。如您所见，它已经拥有比内置复选框更多的功能。

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

旧的、设计不佳的代码

Working Demo

首先，设置一个画布

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'));

接下来，设计一种让画布自行更新的方法。

(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 修改复选框样式。这不需要任何 JavaScript 或 HTML 操作：

.form input[type="checkbox"]:before { display: inline-block;字体：normal normal normal 14px/1 FontAwesome；字体大小：继承；文本渲染：自动； -webkit-font-smoothing：抗锯齿；内容：“\f096”；不透明度：1！重要；边距顶部：-25px；外观：无；背景：#fff; } .form input[type="checkbox"]:checked:before { content: "\f046"; } .form input[type="checkbox"] { font-size: 22px;外观：无； -webkit 外观：无； -moz 外观：无； }

<输入类型="复选框" />

---

SCSS / SASS 实施

更现代的方法

对于那些使用 SCSS（或轻松转换为 SASS）的人，以下内容会有所帮助。实际上，在复选框旁边制作一个元素，这是您将设置样式的元素。单击复选框时，CSS 会重新设置姊妹元素的样式（为新的选中样式）。代码如下：

label.checkbox { input[type="checkbox"] { 可见性：隐藏；显示：块；高度：0；宽度：0；位置：绝对；溢出：隐藏； &:checked + span { 背景：$accent; } } 跨度 { 光标：指针；高度：15px；宽度：15px；边框：1px 实心 $accent；边框半径：2px；显示：内联块；过渡：全0.2s $interpol； } } 标签文本

---

一个简单而轻量级的模板：

输入[类型=复选框] {光标：指针； } 输入[type=checkbox]:checked:before { 内容: "\2713";背景：#fffed5；文本阴影：1px 1px 1px rgba(0, 0, 0, .2);字体大小：20px；文本对齐：居中；行高：8px；显示：内联块；宽度：13px；高度：15px；颜色：#00904f；边框：1px 实心#cdcdcd；边框半径：4px；边距：-3px -3px；文本缩进：1px； } 输入[type=checkbox]:before { 内容: "\202A";背景：#ffffff；文本阴影：1px 1px 1px rgba(0, 0, 0, .2);字体大小：20px；文本对齐：居中；行高：8px；显示：内联块；宽度：13px；高度：15px；颜色：#00904f；边框：1px 实心#cdcdcd；边框半径：4px；边距：-3px -3px；文本缩进：1px； } checked1
unchecked2
checked2+label
unchecked2+label+rtl

https://jsfiddle.net/rvgccn5b/

---

我认为最简单的方法是设置 label 的样式并使 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，即使它是隐藏的，仍然可以访问，并且它的值将在提交表单时发送。对于旧浏览器，您可能必须将 label 的类更改为使用 JavaScript 进行检查，因为我认为旧版本的 Internet Explorer 无法理解 checkbox 上的 ::checked。

---

这是一个带有一点动画的现代版本，您可以自定义简单的样式：

.checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: transparent;
    border: 2px solid #7C7A7D;
    border-radius: 5px;
    margin: 0;
    outline: none;
    transition: 0.5s ease;
    opacity: 0.8;
    cursor: pointer;
}


.checkbox:checked {
    border-color: #7C7A7D;
    background-color: #7C7A7D;
}


.checkbox:checked:before {
   position: absolute;
   left: 2px;
   top: -4px;
   display: block;
   content: '\2713';
   text-align: center;
   color: #FFF;
   font-family: Arial;
   font-size: 14px;
   font-weight: 800;
}


.checkbox:hover {
   opacity: 1.0;
   transform: scale(1.05);
}

---

不需要 JavaScript 或 jQuery。

以简单的方式更改您的复选框样式。

输入[type="checkbox"] { 显示：无；边框：无！重要；盒子阴影：无！重要； } 输入[type="checkbox"] + 标签跨度 { 背景： url(http://imgh.us/uncheck.png);宽度：49px；高度：49px；显示：内联块；垂直对齐：中间； } input[type="checkbox"]:checked + label span { 背景: url(http://imgh.us/check_2.png);宽度：49px；高度：49px；垂直对齐：中间； } 点击我

Here is a JSFiddle link

---

带有 CSS 的自定义复选框（WebKit 浏览器解决方案仅限 Chrome、Safari、移动浏览器）

<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
<label for="cardAccptance" class="bold"> Save Card for Future Use</label>

CSS：

    /* The checkbox-cu */
    
    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    
    /* Hide the browser's default checkbox-cu */
    
    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    
    /* Create a custom checkbox-cu */
    
    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }
    
    
    /* On mouse-over, add a grey background color */
    
    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }
    
    
    /* When the checkbox-cu is checked, add a blue background */
    
    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }
    
    
    /* Create the checkmark/indicator (hidden when not checked) */
    
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    
    /* Show the checkmark when checked */
    
    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }
    
    
    /* Style the checkmark/indicator */
    
    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

---

通过将 Materialize 与自定义样式表一起使用，您可以实现以下目标：

CSS 代码

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}

HTML 代码

<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>

演示

JSFiddle demo

---

这是最简单的方法，您可以选择要赋予此样式的复选框。

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>

---

这是一个纯 CSS/HTML 版本，根本不需要 jQuery 或 JavaScript，简单干净的 HTML 和非常简单短的 CSS。

这是 JSFiddle

http://jsfiddle.net/v71kn3pr/

这是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>

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

这可以调整为能够具有单独的单选或复选框、复选框组和单选按钮组。

此 html/css 将允许您还捕获标签上的点击，因此即使您仅点击标签，复选框也会被选中和取消选中。

这种类型的复选框/单选按钮可以完美地与任何形式配合使用，完全没有问题。也已使用 PHP、ASP.NET (.aspx)、JavaServer Faces 和 ColdFusion 进行了测试。

---

由于 Edge 和 Firefox 等浏览器不支持复选框输入标签上的 :before :after ，因此这里有一个纯 HTML 和 CSS 的替代方案。当然，您应该根据您的要求编辑 CSS。

为复选框制作 HTML，如下所示：

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

将此样式应用于复选框以更改颜色标签

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

---