Targeting html label text with a css selector

Viewed 6561

Given the following HTML, is it possible to target the text within a label with a CSS selector?

<fieldset class="sl">
    <legend>
        Text Inputs
    </legend>
    <label>
        Text Input:
        <input type="text" />
    </label>

    <label>
        Read-only Text Input:
        <input type="text" readonly value="this is read-only" />
    </label>
</fieldset>

So in the above, I want to target "Text Input" or "Read-only Text Input:" and set the width to align the textboxes left positions.

The only thing I can think of that works is to wrap the text within a span.

<label>
    <span>Text Input:</span>
    <input type="text" />
</label>

With CSS selector:

fieldset.sl label span {
    width: 200px;
    display: inline-block;
}

FYI - I'm looking at having best of both worlds using CSS to switch between label on the same line and separate line above the input - without having to modify the html structure - only a tweak to the fieldset class, like the following which uses the text in the label wrapped in a span.

Target achieve

2 Answers
Related