如何为禁用输入设置 HTML 标签样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19362716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style a HTML label for disabled input
提问by mjr
I would like the labels for my form elements to be greyed out if the input is disabled and am not able to get it to work for text inputs. I have tried the following:
如果输入被禁用并且无法让它用于文本输入，我希望我的表单元素的标签变灰。我尝试了以下方法：
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>
The styling works for the checkbox label, but not the text label. Are checkboxes the only input types that let you style their labels via css?
样式适用于复选框标签，但不适用于文本标签。复选框是唯一可以让您通过 css 设置标签样式的输入类型吗？
I testing with Firefox.
我用 Firefox 测试。
回答by gvee
Based on the comment made by @andi:
根据@andi 的评论：
input:disabled+labelmeans 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".)
input:disabled+label意味着标签紧跟在输入之后。在您的 HTML 中，标签出现在文本输入之前。（但“之前”没有 CSS。）
He's absolutely right. But that shouldn't stop us being able to solve the problem with a little trickery!
他是完全正确的。但这不应该阻止我们能够通过一些小技巧来解决问题！
First step: swap the HTML elements order so that the <label>appears afterthe <input>. This will allow the styling rules to work as desired.
第一步：交换HTML元素顺序，以便<label>出现后的<input>。这将允许样式规则按需要工作。
Then for the fun bit: use CSS to position the labels for text inputs on the left hand side!
然后是有趣的一点：使用 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>回答by OneOfOne
You can also use floats and always put the label after the input Demo
也可以使用浮点数，并且始终将标签放在输入Demo 之后
You will have to wrap it in a span (or any other element really).
您必须将它包装在一个跨度（或任何其他元素）中。
HTML :
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 :
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;
}
回答by AlexVMM
You can use atribute selectors in CSS, example https://jsfiddle.net/8pp6mpp5/1/
您可以在 CSS 中使用属性选择器，例如https://jsfiddle.net/8pp6mpp5/1/
Html
html
<label disabled="disabled">Hola Mundo!</label></br>
<label>Hola Mundo!</label>`
CSS
CSS
label[disabled="disabled"]{
background-color: #AAA;
}
回答by Dejan
This selector input:disabled+label{color:#ccc;}targets label elements that are placed after an input element that is disabled
此选择器input:disabled+label{color:#ccc;}针对放置在禁用的输入元素之后的标签元素
In this snippet the label is after a disabled input, so the label element is gray
在此代码段中，标签位于禁用输入之后，因此标签元素为灰色
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
In this case, the label is before the input so the selector does not apply to it
在这种情况下，标签在输入之前，因此选择器不适用于它
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
Possible solution would be to wrap your elements in an extra div and apply a class name to the div, something like this
可能的解决方案是将您的元素包装在一个额外的 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>
And then you can write your css like this
然后你可以像这样写你的css
.disabled label {
color: #ccc;
}
回答by Shessuky
I had the same issue: make a read-only input EXACTLY like label, I add a set of css styles to the input to get to that goal:
我遇到了同样的问题：制作一个与标签完全一样的只读输入，我在输入中添加了一组 css 样式以达到该目标：
<input readonly class="inputLikeLabel" value="${myBean.property}"></input>
And in CSS:
在 CSS 中：
.inputLikeLabel {
background-color: #ffffff;
text-align: center;
border: none;
cursor: none;
pointer-events: none;
}
By the css style, the input has a white background with no border, no mouse cursor and no click event...similar to label by the end !
通过 css 样式，输入具有白色背景，没有边框，没有鼠标光标，也没有点击事件......类似于最后的标签！
