RFC: CSS label vs input

Resolved rkuipers33
(@rkuipers33)

6 years, 2 months ago

Hi David,

First off, I love your plugin. Nice, crisp and easy to use.

However, I’m trying to change some things using CSS and get stuck on the fact that the labels come before the corresponding inputs in pt-field-groups.
Disadvantage of this being we cannot use constructions like input:focus + label::before in CSS.
This is because CSS does not have the ability to traverse backwards (i.e. select previous siblings) or up the parent node (i.e. select the wrapping elements).

An example of the styling I am trying to achieve is seen here: https://codepen.io/ilwcss/pen/tAgqH

Now of course with JS everything can be done. But I think it would make sense to have the label and input reversed.
Or maybe you have solved similar challenges far simpler than what I’m trying to do?

Id like to hear what you think of my suggestion!

Best regards,
Rob

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter rkuipers33
(@rkuipers33)

6 years, 2 months ago
UPDATE: Tried it by modifying includes/shortcodes.php

It breaks existing forms by showing the label underneath the input… (I should have thought of that), which can be mitigated by CSS

Something like:
```
.pt-form-group {
    display: flex;
    flex-direction: column-reverse;
}
```
- This reply was modified 6 years, 2 months ago by rkuipers33.
Plugin Contributor davdebcom
(@davdebcom)

6 years, 2 months ago

Thanks for your message. I’m very reluctant to change the HTML now, as thousands of users already have custom css based on the current structure. So it will be some more work to have a UI or something to select between old and new structure. But that’s for the future.

Check the changelog, in the recent version I added “Fields: add “class”…”. Maybe you can use that?
https://wordpress.org/plugins/paytium/#developers
Thread Starter rkuipers33
(@rkuipers33)

6 years, 2 months ago
David, you’re right, that is an important consideration.

The extra class on fields do not solve the problem (problem is too big a word) of not being able to use things like input::focus label { color: blue; } in CSS, I’m afraid.

After some thought I came up with this: I wrapped just the input and label (in that order) in a new <div class="pt-field-group">

To make the Parsley errors not interfere with the label styling, I added an id to the div, like <div class="pt-field-group" id="pt-field-group-firstname-2"> (example)
and used that in the corresponding field by adding data-parsley-errors-container="#pt-field-group-firstname-2" .

Putting an extra div-wrapper in between does not break anyone’s CSS.
And I suppose nobody is relying upon the label being before the input in HTML.

Adding the following CSS in /paytium/public/css/public.css makes things look just like before:
```
.pt-field-group {
    display: flex;
    flex-direction: column-reverse;
}
```
I did some extra styling in my theme after that and it is soooh easy to make it look (even) great(er) now!

Hope you will reconsider and I’ll be glad to further elaborate if helpful.
Thanks,
Rob
Plugin Contributor davdebcom
(@davdebcom)

6 years, 2 months ago

Thanks, I’ll keep this in mind.
Thread Starter rkuipers33
(@rkuipers33)

6 years, 2 months ago
I’m so enthusiastic about this, I needed to share a bit…

Just to get a feel of the possibilities of things like:
```
.pt-field-group input:required + label::after,
.pt-field-group select:required + label::after {
  content: " (required)";
}
.pt-field-group input:focus + label,
.pt-field-group select:focus + label {
  color: #2b96f1;
}
.pt-field-group .parsley-error:focus + label {
  color: #a94442;
}
```
See https://codepen.io/rkuipers/pen/vYOeNvV

The effect shown here should be possible too, by defining a placeholder containing a single space, using .pt-field-group input:placeholder-shown + label and .pt-field-group input:not(:placeholder-shown) + label !

I’ll stop now 😉
Cheers, Rob

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘RFC: CSS label vs input’ is closed to new replies.