如何为禁用的复选框设置样式？

Question

你知道当复选框被禁用时如何设置其样式吗？

例如：

<input type="checkbox" value="All Terrain Vehicle"
       name="exfilter_All Terrain Vehicle"
       id="exfilter_All_Terrain_Vehicle"
       class="exfilter" disabled="">

- Ozzy

Answer 1

使用CSS中的属性选择器。

input[disabled]{
  outline:1px solid red; // or whatever
}

仅用于复选框

input[type=checkbox][disabled]{
  outline:1px solid red; // or whatever
}

$('button').click(function() {
  const i = $('input');

  if (i.is('[disabled]'))
    i.attr('disabled', false)
  else
    i.attr('disabled', true);
})

input[type=checkbox][disabled] {
  outline: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="tasd" disabled />
<input type="text" value="text" disabled />
<button>disable/enable</button>

- Gabriele Petrioli

---

@RayL。在所有浏览器中似乎都可以正常工作...请查看我回答中的示例。 - Gabriele Petrioli

除了大纲属性，复选框的任何属性似乎都不能进行样式化。 - Alex Reynolds

你无法直接为复选框添加样式，但你可以对它应用CSS滤镜 filter: invert(25%); 来源。 - Christian Long

我不知道这是否是过去十年中发生了变化的行为，但目前来看，所有这些都没有任何影响。浏览器会自行决定复选框应该长什么样子，如果你想要不同的外观，则会遇到困难。 - Martha

是的，我也一样...我无法使用input:disabled或input[disabled]来设置复选框的样式，但是很多答案都说这是可能的。 - Code Novice

Answer 2

由于禁用复选框受浏览器/操作系统控制，因此无法直接对其进行样式设置。

但是，您可以巧妙地使用纯CSS将复选框替换为模拟复选框的标签。您需要有一个相邻的标签，以便您可以使用它来样式化新的“伪复选框”。基本上，您完全重新绘制了它，但这使您可以完全控制其在任何状态下的外观。

我提供了一个基本示例，以便您可以看到它的效果：http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

这是示例：

input[type="checkbox"] {
    display: none;
}

label:before {
    background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #035f8f;
    height: 36px;
    width: 36px;
    display: block;
    cursor: pointer;
}
input[type="checkbox"] + label:before {
    content: '';
    background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #3d9000;
    color: #96be0a;
    font-size: 38px;
    line-height: 35px;
    text-align: center;
}

input[type="checkbox"]:disabled + label:before {
    border-color: #eee;
    color: #ccc;
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

input[type="checkbox"]:checked + label:before {
    content: '✓';
}

<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div>
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div>
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div>
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>

根据您的浏览器兼容性和可访问性水平，可能需要进行一些额外的微调。

- John Reid

Answer 3

使用 :disabled CSS3 伪选择器

- Adam

Answer 4

您可以使用以下css来选择它：

input[disabled] { /* css attributes */ }

- Vlad

---

+1 是因为它能兼容大多数浏览器。但我会将其改成 input[disabled]，这样它只会检查是否存在禁用属性。 - stevelove

Answer 5

复选框（单选按钮和<select>）是操作系统级别的组件，而不是浏览器级别的。您无法可靠地以一种在各种浏览器和操作系统中保持一致的方式对它们进行样式化。

最好的方法是在其上覆盖一个图层，并对该图层进行样式设置。

- Diodeus - James MacFarlane

Answer 6

使用CSS的:disabled选择器（适用于CSS3）：

checkbox-style { }
checkbox-style:disabled { }

或者你需要使用JavaScript根据启用/禁用状态来更改样式（假设它是基于你的问题被启用/禁用的）。

- Brad Christie

Answer 7

请勿在输入框中添加“disabled”属性，并应用以下样式。

input[type="checkbox"] {
  pointer-events: none;
}

- Republic2602

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

这是一个很棒的解决方案，可以像启用复选框一样轻松地自定义禁用复选框。 - PetoMPP

Answer 8

如果你想阻止某人更新复选框以使其看起来被禁用，那么只需使用JQuery。

$('input[type=checkbox]').click(false);

然后你可以自定义样式复选框。

- MDC

---

您也可以直接在不使用jQuery的情况下进行内联操作：<input type='checkbox' onclick='return false;' /> - S.Mason

Answer 9

input[type='checkbox'][disabled][checked] {
width:0px; height:0px;
}
input[type='checkbox'][disabled][checked]:after {
 content:'\e013'; position:absolute; 
 margin-top:-10px;
 opacity: 1 !important;
 margin-left:-5px;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
}

- minto antony

---

可能需要使用Bootstrap / Glyphicon。 - minto antony

Answer 10

这也被IE支持：

HTML

class="disabled"

CSS

.disabled{
...
}

- user669677