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.
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.
<span>
<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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With