Question

表单的HTML类似于以下代码段：

<label>
  <input type="radio" name="package" value="single"/>
  <span class="label-text">Single</span>
</label>

为了向用户显示该字段是可点击的，我将标签的CSS设置为：

label {
  curser: pointer;
}

现在我想知道是否可以检查（在CSS中）输入字段是否被禁用，如果是，则将光标设置为not-allowed。

我尝试使用：

label:has(> input:disabled) {
  cursor: not-allowed;
}

但那不起作用。你知道怎么做吗？

Answer 1

根据您的实际标记，我们可以修改光标更改的目标，并通过这种方式使span更具相关性：

＆＃13;

label {
  position: relative;
  margin:20px;
}
label span {
  cursor:pointer;
  position: relative;
  z-index:10;
  padding-left:20px;
}
label input {
  position:absolute;
}
input[disabled]  + span {
  cursor: not-allowed;
  color:#666;
}

＆＃13;

<label>
  <input type="radio" name="package" value="single" />
  <span class="label-text">Single</span>
</label>
<label>
  <input type="radio" name="package" value="single" disabled/>
  <span class="label-text">Single</span>
</label>

＆＃13;

或者，如果你不想要它绝对：

＆＃13;

label {
  margin: 20px;
}
label span, label input {
  cursor: pointer;
}
label input[disabled], input[disabled] + span {
  cursor: not-allowed;
  color: #666;
}

＆＃13;

<label>
  <input type="radio" name="package" value="single" />
  <span class="label-text">Single</span>
</label>
<label>
  <input type="radio" name="package" value="single" disabled/>
  <span class="label-text">Single</span>
</label>

＆＃13;

Answer 2

您的语法错误，禁用应该用作属性：

label:has(> input[disabled=disabled]) { cursor: not-allowed; }

检查标签内的输入是否被禁用

2 个答案: