Targeting html label text with a css selector

Question

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.

Answer 1

Unfortunately the only CSS properties that allow you to style pure text are mostly related to the font manipulation, color and letter spacing.

You have a couple of best practice solutions to achieve what you want.

• You can wrap each text within a <span>
• or you could use a much cleaner alternative which is by using the <label> tags to wrap the actual labels and use the for attribute on the <label> element to relate it to its specific input field.

For the second example, instead of having this:

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

you would end up with this:

<label for="textinput">Text Input:</label>
<input type="text" id="textinput" />

If you still wish to group each input with its respective <label> and maintain full control over the field groups, you can always wrap them in a <div> tag, like so:

<div class="field-group">
    <label for="textinput">Text Input:</label>
    <input type="text" id="textinput" />
</div>

Answer 2

You can use CSS Grid Layout here and make label a grid container. This way text of label will be wrapped in anonymous grid item.

From CSS grid specs:

Each contiguous run of text that is directly contained inside a grid container is wrapped in an anonymous grid item. However, an anonymous grid item that contains only white space is not rendered, as if it were display: none.

Demo:

.sl label {
  display: flex;
}

.sl label {
  display: grid;
  grid-template-columns: 200px 1fr;
}

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