时间戳

首页 > 解决方案 > 如何更改禁用的复选框颜色

css - 如何更改禁用的复选框颜色

问题描述

我想覆盖禁用复选框的语义 ui css，因为我不擅长 css，我不知道应该覆盖哪个角色。

<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<div class="ui disabled checkbox">
  <input type="checkbox" disabled="disabled">
  <label>Disabled</label>
</div>
<div class="ui disabled checkbox">
  <input type="checkbox" disabled="disabled">
  <label></label>
</div>

从上面的代码片段看来，他们正在设计标签的样式。如何将复选框颜色框设置为灰色或任何较深的颜色？

标签： csssemantic-ui

解决方案

input[type="checkbox"]:disabled + label::before{
  background: gray;
}
input[type="checkbox"]:disabled + label:hover::before{
  background: gray;
  border: 1px solid #d4d4d5;
}
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet" />
<div class="ui disabled checkbox">
  <input type="checkbox" disabled="disabled">
  <label>Disabled</label>
</div>
<br/>
<div class="ui disabled checkbox">
  <input type="checkbox">
  <label>Abled</label>
</div>

推荐阅读