如何为禁用输入创建HTML标签

概述我希望我的表单元素的标签是灰色的,如果输入被禁用,并且不能让它为文本输入工作.我已经尝试过以下内容： input:disabled { background:#dddddd;}input:disabled+label{color:#ccc;}<input type='checkbox' disabled id='check1'><label for='check1'>Check 我希望我的表单元素的标签是灰色的,如果输入被禁用,并且不能让它为文本输入工作.我已经尝试过以下内容：

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

解决方法 根据@andi发表的评论：

@H_403_16@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元素的顺序,使< label>出现在< input>之后.这将允许样式规则按需要工作.

HTML

<input type="checkBox" ID="check1" Disabled="Disabled"><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将文本输入的标签放在左侧：

CSS

input[type=text]+label {    float: left;}

演示：http://jsfiddle.net/F2Nh4/5/

总结

以上是内存溢出为你收集整理的如何为禁用输入创建HTML标签全部内容，希望文章能够帮你解决如何为禁用输入创建HTML标签所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。