Question

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

input:disabled {
    background:#dddddd;
}

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

<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
<br>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>

Js Fiddle

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

我使用Firefox进行测试。

Answer 1

基于@andi的评论：

input:disabled+label表示标签紧接在输入之后。在HTML中，标签在文本输入之前出现。（但是“之前”没有CSS。）

他是对的。但这不应该阻止我们用一点点诡计来解决问题！

第一步：交换HTML元素顺序，以便<label>在<{em> <input>之后出现。这将允许样式规则按需运行。

然后为有趣的位：使用CSS在左侧定位文本输入的标签！

input:disabled { background: #dddddd; } input:disabled+label { color: #ccc; } input[type=text]+label { float: left; }

<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>

Answer 2

您也可以使用浮点数并始终将标签放在输入Demo

之后

你必须将它包裹在一个范围内（或任何其他元素）。

HTML：

<span>
    <input type='checkbox' disabled id='check1'>
    <label for='check1'>Check</label>
</span>
<br>
<span>
    <input type='text1' id='text1' disabled>
    <label for='check'>Text</label>
</span>

CSS：

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;
}

Answer 3

此选择器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>

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

<div class='disabled'>
    <input type='checkbox' disabled id='check1'>
    <label for='check1'>Check</label>
</div>
<div class='disabled'>
    <label for='text1'>Text</label>
    <input type='text' id='text1' disabled>
</div>

然后你就可以像这样编写你的CSS了

.disabled label {
    color: #ccc;
}

Answer 4

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

HTML

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

CSS

label[disabled="disabled"]{
    background-color: #AAA;
}

Answer 5

我遇到了同样的问题：像标签一样进行只读输入，我向输入中添加了一组CSS样式以实现该目标：

<input readonly class="inputLikeLabel" value="${myBean.property}"></input>

在CSS中：

.inputLikeLabel {
    background-color: #ffffff;
    text-align: center;
    border: none;
    cursor: none;
    pointer-events: none;
}

通过css样式，输入具有白色背景，没有边框，没有鼠标光标，没有单击事件...类似于结尾处的标签！

如何为禁用的输入设置HTML标签的样式

5 个答案: