关于CSS：如何为禁用的输入设置HTML标签样式


How to style a HTML label for disabled input

我希望表单元素的标签显示为灰色，如果输入被禁用并且无法使其用于文本输入。 我尝试了以下方法：

1
2
3
4
5
6
7
8
9
10
11
input:disabled {
    background:#dddddd;
}

input:disabled+label{color:#ccc;}

<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>

<label for='text1'>Text</label>
<input type='text' id='text1' disabled>

提斯

样式适用于复选框标签，但不适用于文本标签。 复选框是让您通过CSS设置标签样式的唯一输入类型吗？

我使用Firefox进行测试。

相关讨论

根据@andi的评论：

input:disabled+label means that the label is immediately AFTER the input. In your HTML, the label comes BEFORE the text input. (but there's no CSS for"before".)

他是完全正确的。但这并不能阻止我们以一些小技巧解决问题！

第一步：交换HTML元素顺序，以使出现在之后。这将使样式规则能够按需工作。

然后，有趣的是：使用CSS将用于文本输入的标签放置在左侧！

1
2
3
4
5
6
7
8
9
10
11
input:disabled {
  background: #dddddd;
}

input:disabled+label {
  color: #ccc;
}

input[type=text]+label {
  float: left;
}
1
2
3
4
5
6
7
8
9
10
11
<input type="checkbox" disabled="disabled" id="check1">
<label for="check1">Check</label>
<br />
<input type="text" id="text1" disabled="disabled">
<label for="text1">Text</label>
<br />
<input type="checkbox" id="check2">
<label for="check2">Check</label>
<br />
<input type="text" id="text2">
<label for="text2">Text</label>

相关讨论

您可以在CSS中使用属性选择器，例如https://jsfiddle.net/8pp6mpp5/1/

HTML

1
2
<label disabled="disabled">Hola Mundo!</label></br>
<label>Hola Mundo!</label>`

的CSS

1
2
3
label[disabled="disabled"]{
    background-color: #AAA;
}
相关讨论

您还可以使用浮点数，并始终将标签放在输入演示后面

您将不得不将其包装在一个范围内(或其他任何元素)。

HTML：

1
2
3
4
5
6
7
8
9
<span>
    <input type='checkbox' disabled id='check1'>
    <label for='check1'>Check</label>
</span>

<span>
    <input type='text1' id='text1' disabled>
    <label for='check'>Text</label>
</span>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
span {
    display: inline-block;
    overflow: hidden;
}

input {
    float: right;
}

label {
    float: left;
}

input:disabled {
    background:#dddddd;
}

input + label {
    float: none;
}

input:disabled + label {
    color:#ccc;
}

此选择器input:disabled+label{color:#ccc;}定位放置在禁用的输入元素之后的标签元素

在此代码段中，标签位于禁用输入之后，因此标签元素为灰色

1
2
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>

在这种情况下，标签在输入之前，因此选择器不适用于它

1
2
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>

可能的解决方案是将元素包装在一个额外的div中，然后将一个类名应用于div，类似这样

1
2
3
4
5
6
    <input type='checkbox' disabled id='check1'>
    <label for='check1'>Check</label>


    <label for='text1'>Text</label>
    <input type='text' id='text1' disabled>

然后你可以这样写你的CSS

1
2
3
.disabled label {
    color: #ccc;
}
相关讨论