Title: RFC: CSS label vs input Last modified: March 2, 2020 --- # RFC: CSS label vs input * Resolved [rkuipers33](https://wordpress.org/support/users/rkuipers33/) * (@rkuipers33) * [6 years, 2 months ago](https://wordpress.org/support/topic/rfc-css-label-vs-input/) * 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-group`s. 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](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](https://wordpress.org/support/users/rkuipers33/) * (@rkuipers33) * [6 years, 2 months ago](https://wordpress.org/support/topic/rfc-css-label-vs-input/#post-12499026) * 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](https://wordpress.org/support/users/rkuipers33/). * Plugin Contributor [davdebcom](https://wordpress.org/support/users/davdebcom/) * (@davdebcom) * [6 years, 2 months ago](https://wordpress.org/support/topic/rfc-css-label-vs-input/#post-12499261) * 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](https://wordpress.org/plugins/paytium/#developers) * Thread Starter [rkuipers33](https://wordpress.org/support/users/rkuipers33/) * (@rkuipers33) * [6 years, 2 months ago](https://wordpress.org/support/topic/rfc-css-label-vs-input/#post-12500341) * 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 `
` * To make the Parsley errors not interfere with the label styling, I added an id to the div, like `
` (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](https://wordpress.org/support/users/davdebcom/) * (@davdebcom) * [6 years, 2 months ago](https://wordpress.org/support/topic/rfc-css-label-vs-input/#post-12502141) * Thanks, I’ll keep this in mind. * Thread Starter [rkuipers33](https://wordpress.org/support/users/rkuipers33/) * (@rkuipers33) * [6 years, 2 months ago](https://wordpress.org/support/topic/rfc-css-label-vs-input/#post-12509108) * 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](https://codepen.io/rkuipers/pen/vYOeNvV) * The effect shown [here](https://codepen.io/dannykingme/pen/IvFuB/) 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. * ![](https://ps.w.org/paytium/assets/icon-256x256.png?rev=1967172) * [Paytium: Mollie payment forms & donations](https://wordpress.org/plugins/paytium/) * [Frequently Asked Questions](https://wordpress.org/plugins/paytium/#faq) * [Support Threads](https://wordpress.org/support/plugin/paytium/) * [Active Topics](https://wordpress.org/support/plugin/paytium/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/paytium/unresolved/) * [Reviews](https://wordpress.org/support/plugin/paytium/reviews/) * 5 replies * 2 participants * Last reply from: [rkuipers33](https://wordpress.org/support/users/rkuipers33/) * Last activity: [6 years, 2 months ago](https://wordpress.org/support/topic/rfc-css-label-vs-input/#post-12509108) * Status: resolved