CODEWITHSUNDEEP
htmlcsspseudo-element
Mark
Mark

Reputation: 5098

How to add line break after input element with CSS?

I'm consuming a service which returns dynamic HTML with a series of labels and inputs e.g.

input:after {
  content: "\a";
  white-space: pre;
}
<label for="username">Username</label>
<input type="text" id="username" name="username" />

<label for="country">Country</label>
<input type="text" id="country" name="country" />

I want the form to be formatted as follows:

enter image description here

But it does not work. Surrounding the labels and inputs with a div is NOT possible as this is dynamic HTML returned to me by a service.

Any ideas how this can be achieved only through CSS?

Upvotes: 6

Views: 9180

Answers (2)

Stickers
Stickers

Reputation: 78706

Replaced elements including <img>, <object>, <input>, and<textarea> ... do not have :before and :after pseudo-elements.

As a workaround, you could set the line break on the <label> element.

label:before {
    content: "\a";
    white-space: pre;
}
<label for="username">Username</label>
<input type="text" id="username" name="username" />

<label for="country">Country</label>
<input type="text" id="country" name="country" />

Upvotes: 11

Yoann Augen
Yoann Augen

Reputation: 2036

Maybe something like that

label, input {
    display: inline-block;
}
label {
    width: 20%
}
input {
    width: 70%
}

Adapt the value as you need. http://jsfiddle.net/sj4jrkLq/3/

Upvotes: 0

Related Questions