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

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

我遇到了同样的问题：制作一个与标签完全相同的只读输入，我在输入中添加了一组 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样式，输入是白色背景，没有边框，没有鼠标光标，也没有点击事件...类似于末尾的标签！

Answer 2

基于@andi 的评论：

input:disabled+label 表示标签紧跟在输入之后。在您的 HTML 中，标签位于文本输入之前。 （但“之前”没有 CSS。）

他完全正确。但这不应该阻止我们通过一些小技巧来解决问题！

第一步：交换 HTML 元素的顺序，使<label> 出现在<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 3

您可以在 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 4

您也可以使用浮点数并始终将标签放在输入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 5

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

在这个 sn-p 中，标签位于禁用输入之后，因此标签元素是灰色的

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