44

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

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小提琴

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

我用 Firefox 进行测试。

4

5 回答 5

65

根据@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>

于 2013-10-14T14:51:09.443 回答
5

此选择器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;
}
于 2013-10-14T14:51:22.873 回答
3

您也可以使用浮点数并始终将标签放在输入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;
}
于 2013-10-14T14:54:41.663 回答
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;
}
于 2016-11-30T10:52:27.107 回答
0

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

于 2020-03-02T12:54:29.223 回答