Html 如何设置禁用复选框的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4271463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style a disabled checkbox?
提问by Ozzy
Do you know how I could style a checkbox when it is disabled?
你知道我如何在禁用复选框时设置它的样式吗？
E.g.:
例如：
<input type="checkbox" value="All Terrain Vehicle"
name="exfilter_All Terrain Vehicle"
id="exfilter_All_Terrain_Vehicle"
class="exfilter" disabled="">
回答by Gabriele Petrioli
Use the attribute selector in the css
在 css 中使用属性选择器
input[disabled]{
outline:1px solid red; // or whatever
}
for checkbox exclusively use
复选框专用
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>回答by John Reid
You can't style a disabled checkbox directly because it's controlled by the browser / OS.
您不能直接设置禁用复选框的样式，因为它由浏览器/操作系统控制。
However you can be clever and replace the checkbox with a label that simulates a checkbox using pure CSS. You need to have an adjacent label that you can use to style a new "pseudo checkbox". Essentially you're completely redrawing the thing but it gives you complete control over how it looks in any state.
但是，您可以聪明地将复选框替换为使用纯 CSS 模拟复选框的标签。您需要有一个相邻的标签，您可以使用它来设置新的“伪复选框”的样式。从本质上讲，您完全重绘了事物，但它使您可以完全控制它在任何状态下的外观。
I've thrown up a basic example so that you can see it in action: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/
我提出了一个基本示例，以便您可以看到它的实际效果：http: //jsfiddle.net/JohnSReid/pr9Lx5th/3/
Here's the sample:
这是示例：
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>Depending on your level of browser compatibility and accessibility, some additional tweaks will need to be made.
根据您的浏览器兼容性和可访问性级别，需要进行一些额外的调整。
回答by Adam
Use the :disabledCSS3 pseudo-selector
使用:disabledCSS3 伪选择器
回答by Vlad
You can select it using css like this:
您可以像这样使用 css 选择它：
input[disabled] { /* css attributes */ }
回答by Diodeus - James MacFarlane
Checkboxes (radio buttons and <select>) are OS-level components, not browser-level. You cannot reliably style them in a manner that will be consistent across browsers and operating systems.
复选框（单选按钮和<select>）是操作系统级别的组件，而不是浏览器级别的组件。您无法以跨浏览器和操作系统一致的方式可靠地设置它们的样式。
Your best bet it to put an overlay on top and style that instead.
最好的办法是在顶部放置一个叠加层并为其设置样式。
回答by Brad Christie
Use CSS's :disabledselector (for CSS3):
使用 CSS 的:disabled选择器（用于 CSS3）：
checkbox-style { }
checkbox-style:disabled { }
Or you need to use javascript to alter the style based on when you enable/disable it (Assuming it is being enabled/disabled based on your question).
或者，您需要使用 javascript 根据启用/禁用它的时间来更改样式（假设根据您的问题启用/禁用它）。
回答by minto antony
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;
}
回答by minto antony
This is supported by IE too:
这也受 IE 支持：
HTML
HTML
class="disabled"
CSS
CSS
.disabled{
...
}
