How can I add section breaks to a form with only CSS?-CodePudding

This might not be possible, but I'm open to ideas for other solutions!

I'm using a WordPress plugin for a custom registration form. The problem is that the free version does not allow styling such as headlines and section titles. It does however allow you to embed CSS class into each input. Thus, I have set the form itself as .registration_form and currently all fields .register_form_field

I would like to tidy up the form slightly with titles or some other way to create noticeable section breaks that look nice, in order to achieve three sections (Login, Personal, Contact).

For example: If I have set a second CSS class on the first field Username to .username_field And added above the field content:"Login Details" with a small border.

However, I kinda failed because my aim was to put the border below the contents. Although; it might look better with a border top and bottom.

So, does anybody know how I can achieve this or do you have any other ideas to target the class .username_field purely with CSS in order to add a pretty section space / title before it?

Thank you.

.username_field {
    overflow: hidden;
}

.username_field::before {
    content: "Login Details";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    border-bottom: 1px solid #31324E;
}

CodePudding user response：

If I understand you correctly, you want the border to be underneath "Login Details".

First of all, you cannot use the ::before pseudo-element with input. So I assume the field is contained inside some container such as a div, and it's the container that actually has the username_field class.

In that case, I believe the problem is with the height and vertical-align properties you have set, so removing them should fix the problem:

.username_field::before {
    content: "Login Details";
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #31324E;
}

<div class="username_field">
  <label for="field">Username</label><br>
  <input id="field">
</div>