复选框禁用不改变反应中的颜色答案

【问题标题】：Checkbox disabled not changing color in React复选框禁用不改变反应中的颜色
【发布时间】：2020-07-24 18:06:13
【问题描述】：

我有一个已禁用的复选框，但我希望背景为深灰色，但我似乎无法让它工作，css 不会改变颜色：这是.js代码：

export const CheckBoxRowItem = (props) => {
var readOnly = props.onChange == null;
var disabled = props.disabled || false;

return (
    <div className="row row-no-padding">
        <label className="control-label col-md-3">{props.title}</label>
        <div className="controls col-md-9">
            <input type="checkbox" className="checkboxSelect large-check-box" placeholder={props.title}
                checked={props.value || false} readOnly={readOnly} disabled={disabled}
            />
        </div>
    </div>
);

}

和css：

input[type=checkbox][disabled]{
  background: red;
}

【问题讨论】：

这能回答你的问题吗？ how to set checkbox color for chrome

标签： reactjs

【解决方案1】：

css 正在改变颜色，但基于操作系统主题的平台原生样式覆盖了它，因此它被隐藏了。

您可以使用-moz-appearance and -webkit-appearance properties 重置它。但是，这些属性有时也会在某些设备上重置尺寸，因此您需要手动添加宽度/高度：

input[type=checkbox][disabled]{
    background: red;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 12px;
    width: 12px;
}

这也将删除勾号，因此您可以添加background-image: url(...); 以添加一个回

【讨论】：