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

【问题标题】：How to style a disabled checkbox?如何设置禁用复选框的样式？
【发布时间】：2011-05-15 08:41:09
【问题描述】：

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

例如：

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

@RayL。似乎在所有浏览器中都可以正常工作...查看我的答案中的示例..
除了outline属性，看起来checkbox的任何属性都不能设置样式。
您不能直接设置复选框的样式，但可以对其应用 css 过滤器 filter: invert(25%); Source

【解决方案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>

根据您的浏览器兼容性和可访问性级别，需要进行一些额外的调整。

【讨论】：

【解决方案3】：

使用:disabledCSS3 pseudo-selector

【讨论】：

【解决方案4】：

您可以像这样使用 css 选择它：

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

【讨论】：

+1 是对跨浏览器最友好的。但我会将其设为 input[disabled]，以便它只检查 disabled 属性的存在。

【解决方案5】：

复选框（单选按钮和<select>）是操作系统级别的组件，而不是浏览器级别的组件。您无法以跨浏览器和操作系统一致的方式可靠地设置它们的样式。

最好的办法是在顶部放置一个叠加层并设置样式。

【讨论】：

【解决方案6】：

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

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

或者您需要使用 javascript 根据您启用/禁用它的时间来更改样式（假设它是根据您的问题启用/禁用的）。

【讨论】：

【解决方案7】：

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

【讨论】：

可能需要 bootstrap/glyphicon

【解决方案8】：

如果您试图阻止某人更新复选框以使其显示为禁用，那么只需使用 JQuery

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

然后您可以设置复选框的样式。

【讨论】：

你也可以在不使用 jQuery 的情况下直接内联：<input type='checkbox' onclick='return false;' />

【解决方案9】：

IE也支持这个：

HTML

class="disabled"

CSS

.disabled{
...
}

【讨论】：

【解决方案10】：

如果您真的想为复选框添加一些颜色，请尝试此解决方法。

input[type=checkbox][disabled] {
  outline: 5px solid red;
  outline-offset: -20px;
}

【讨论】：