CODEWITHSUNDEEP
htmlcss
Pdnell
Pdnell

Reputation: 321

Positioning label when using labeled control

Okay, trying to create a fillable form that has inline fillable forms (think Mad Libs-style).

For an element using labeled control and given the following code:

<form><p>Lorem ipsum <label class="label__fill-in"><input type="text" class="fill-in" maxlength="30">(community)</label> and stuff</p></form>

Is it possible to position the label text "(community)" below the input line without using for="id-name" (referred to in the MDN as a "labeled control") using only CSS? What would the selector be for only the true label text and not the input within it?

Upvotes: 1

Views: 27

Answers (1)

Schleis
Schleis

Reputation: 43690

Rather that trying to move the text, make the input block element which will cause the text to be below it.

Based on your structure, I imagine that you are looking to get the text outside of the label to be in line with the input. So in order to do that, make the label display: inline-block so that it gets the height that you want. Then you can align the text of the p to the top so that all the text lines up.

https://jsfiddle.net/foyxhz4y/

The css that I used for this is:

label input {
  display:block;
}
label {
  display: inline-block;
}

p * {
  vertical-align: top;
}

To select contents of the label that are not inputs, you can use the :not selector. So to style the text you can use:

label *:not(input)

This will select all contents of the label that are NOT an input element.

Upvotes: 2

Related Questions