CODEWITHSUNDEEP
htmlcssgoogle-chromecss-selectors
JR Rickerson
JR Rickerson

Reputation: 33

Odd styling behavior in Chrome with readonly attribute selector

I've been working on a project involving more or less static CSS and HTML5 with a lot of javascript.

In an attempt to style certain input elements as "faded out" when they can't be edited, I've applied the follow styles:

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

The HTML this applies to is simply a two-column form layout with repeating blocks that look like this:

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

However, when I view the page, the labels continue to appear black. The styling is properly applied to the input boxes. The oddest part is that if I examine the label in the Element Inspector in Chrome's Dev tools, it shows the correct color value. This remains the case when I remove other stylesheets, like another I'm using that sets a default color for the entire body tag. If I uncheck the color property of the rule and recheck it, the color is properly applied, but only for that one element (not the other labels with the same style).

I'm seeing this in Chrome 27.0.1453.93 on Linux, and I can reproduce it in Chrome on Windows as well. The iPad Mini Safari browser that I'm actually targeting renders correctly, as does Firefox. I tried to recreate the problem in a trivial jsFiddle example, and it rendered properly in Chrome.

Please note that I'm aware that "readonly" isn't functionally supported on a label element, I'm just using that to style it, since CSS has no "previous sibling" selector for me to use.

Has anyone else seen this strange behavior or know of any workarounds? Any idea what might cause a conflict such that the Element Inspector reports the correct styling but it isn't rendered properly?

UPDATE:

While I still find the original rendering behavior strange, Zenith and BoltClock make a good point that using readonly on an element that doesn't support that behavior is probably misleading anyway. I'll just have to keep track of a couple of CSS classes and the readonly attribute separately.

Upvotes: 3

Views: 2254

Answers (2)

dsgriffin
dsgriffin

Reputation: 68626

readonly isn't a valid attribute for labels, plus, they are already read only.

If you want to target the labels specifically, just use the relevant selector:

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

jsFiddle here.

Edit: If you want to target multiple labels, use a common class:

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.

Upvotes: 3

laconbass
laconbass

Reputation: 17824

Please note that I'm aware that "readonly" isn't functionally supported on a label element, I'm just using that to style it, since CSS has no "previous sibling" selector for me to use.

That's the reason why it doesn't work. You should mark your "readonly" input containers or the labels with a class.

Upvotes: 0

Related Questions