3

我一直在从事一个涉及或多或少的静态 CSS 和 HTML5 以及大量 javascript 的项目。

为了在某​​些输入元素无法编辑时将其设置为“淡出”，我应用了以下样式：

.input input[readonly], .input label[readonly] {
  color: #999;
}

这适用的 HTML 只是一个包含重复块的两列表单布局，如下所示：

<div>
    <span class="formcol">
        <div class="input">
            <label for="some_field">Some Field</label>
            <input id="some_field" type="text" />
        </div>
    </span>
    <span class="formcol right">
        <div class="input">
            <label for="some_other" readonly>Some Other Field</label>
            <input id="some_other" type="text" readonly />
        </div>
    </span>
</div>

但是，当我查看页面时，标签继续显示为黑色。样式已正确应用于输入框。最奇怪的是，如果我在 Chrome 开发工具的 Element Inspector 中检查标签，它会显示正确的颜色值。当我删除其他样式表时，情况仍然如此，例如我正在使用的另一个样式表，它为整个body标签设置默认颜色。如果我取消选中规则的颜色属性并重新检查它，则颜色会正确应用，但仅适用于那个元素（而不是具有相同样式的其他标签）。

我在 Linux 上的 Chrome 27.0.1453.93 中看到了这一点，我也可以在 Windows 上的 Chrome 中重现它。我实际定位的 iPad Mini Safari 浏览器可以正确呈现，Firefox 也是如此。我试图在一个简单的 jsFiddle 示例中重新创建问题，并在 Chrome 中正确呈现。

请注意，我知道label元素在功能上不支持“只读”，我只是使用它来设置样式，因为 CSS 没有“上一个兄弟”选择器可供我使用。

有没有其他人看到过这种奇怪的行为或知道任何解决方法？知道什么可能导致冲突，例如 Element Inspector 报告正确的样式但未正确呈现吗？

更新：

虽然我仍然觉得原始渲染行为很奇怪，但 Zenith 和 BoltClock 提出了一个很好的观点，readonly即在不支持该行为的元素上使用可能会产生误导。我只需要分别跟踪几个 CSS 类和 readonly 属性。

4

2 回答 2

3

readonly不是标签的有效属性，另外，它们已经是只读的。

如果您想专门针对标签，只需使用相关的选择器：

.input input[readonly], .input label[for=some_other]

jsFiddle在这里。

编辑：如果要定位多个标签，请使用通用类：

HTML：

<label class="random" for="some_field">A field</label>

<label class="random" for="some_other_field">Another field</label>

CSS：

.random {
  color: #999;
}

jsFiddle在这里。

于 2013-06-07T20:41:57.943 回答
0

请注意，我知道标签元素在功能上不支持“只读”，我只是使用它来设置样式，因为 CSS 没有可供我使用的“上一个兄弟”选择器。

这就是它不起作用的原因。您应该用 . 标记您的“只读”输入容器或标签class。

于 2013-06-07T20:48:47.703 回答