[英]How to style a disabled checkbox?
Do you know how I could style a checkbox when it is disabled?你知道当它被禁用时我如何设计一个复选框吗?
Eg:例如:
<input type="checkbox" value="All Terrain Vehicle"
name="exfilter_All Terrain Vehicle"
id="exfilter_All_Terrain_Vehicle"
class="exfilter" disabled="">
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>
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.但是,您可以聪明地将复选框替换为使用纯 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.
本质上,您完全重绘了事物,但它使您可以完全控制它在任何状态下的外观。
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.根据您的浏览器兼容性和可访问性级别,需要进行一些额外的调整。
使用:disabled
CSS3 伪选择器
您可以像这样使用 css 选择它:
input[disabled] { /* css attributes */ }
Checkboxes (radio buttons and <select>
) are OS-level components, not browser-level.复选框(单选按钮和
<select>
)是操作系统级别的组件,而不是浏览器级别的。 You cannot reliably style them in a manner that will be consistent across browsers and operating systems.您无法以跨浏览器和操作系统一致的方式可靠地设置它们的样式。
Your best bet it to put an overlay on top and style that instead.最好的办法是在顶部放置一个叠加层并为其设置样式。
Use CSS's :disabled
selector (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 根据启用/禁用它的时间来更改样式(假设它是根据您的问题启用/禁用)。
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;
}
If you're trying to stop someone from updating the checkbox so it appears disabled then just use JQuery如果您试图阻止某人更新复选框使其看起来已禁用,则只需使用 JQuery
$('input[type=checkbox]').click(false); $('input[type=checkbox]').click(false);
You can then style the checkbox.然后,您可以设置复选框的样式。
do not put disabled in the input and apply the following styles不要在输入中输入禁用并应用以下 styles
input[type="checkbox"] { pointer-events: none; }
This is supported by IE too:这也受 IE 支持:
HTML HTML
class="disabled"
CSS CSS
.disabled{
...
}
In case if you really want to add some colors to a checkbox, try this workaround .如果您真的想为复选框添加一些颜色,请尝试此解决方法。
input[type=checkbox][disabled] {
outline: 5px solid red;
outline-offset: -20px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.