Question

我一直在研究一个涉及或多或少的静态CSS和带有大量JavaScript的HTML5的项目。

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

.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的Dev工具中检查Element Inspector中的标签，它会显示正确的颜色值。当我删除其他样式表时仍然如此，就像我正在使用的样式表一样，它为整个body标记设置了默认颜色。如果取消选中规则的颜色属性并重新检查它，则会正确应用颜色，但仅适用于该一个元素（而不是具有相同样式的其他标签）。

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

请注意，我知道label元素在功能上不支持“readonly”，我只是用它来设置样式，因为CSS没有“previous sibling”选择器供我使用使用

有没有其他人看到这种奇怪的行为或知道任何变通办法？知道什么可能导致冲突，以便Element Inspector报告正确的样式但是它没有正确呈现？

更新

虽然我仍然发现原始渲染行为很奇怪，但Zenith和BoltClock明确指出，在不支持该行为的元素上使用readonly可能会产生误导。我只需要分别跟踪几个CSS类和readonly属性。

Answer 1

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

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

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

jsFiddle here.

修改：如果要定位多个标签，请使用公共类：

<强> 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 here.

Answer 2

请注意，我知道“readonly”在功能上并非如此支持标签元素，我只是用它来设计它，因为 CSS没有“以前的兄弟”选择器供我使用。

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

Chrome中带有readonly属性选择器的奇怪样式行为

2 个答案: