topic Re: Styling Label of Radio Buttons and Form Fields in CMS Development

Styling Label of Radio Buttons and Form Fields

Harling — Tue, 16 Jan 2024 15:22:05 GMT

Hi,
to make my form look cleaner I just use the placeholder text and make the labels invisible by using this code in my css stylesheet:

.hs-form label {
color:transparent!important;

}

Now I have the problem, that my radio buttons and checkbox areas also have no label anymore (but I would need it displayed there). How can I address the labels of radio buttons to give them a different style?

Re: Styling Label of Radio Buttons and Form Fields

SteveHTM — Tue, 16 Jan 2024 15:43:15 GMT

@Harling - I have found that the easiest way to selectively remove labels is just to clear the label string on the form definition when you set up the placeholder. This way you can have a mix of styles dependent on the field type & other requirements.

Hope this helps!

Steve

Re: Styling Label of Radio Buttons and Form Fields

Harling — Tue, 16 Jan 2024 16:02:31 GMT

@SteveHTM - this could be a solution, but I also make the font really small to make the form as dense as needed. This wouldn't be possible when still having the "empty labels" above the fields, but I'll try.

This is how my form usually should look like, no labels but only placeholder text for normal fields to fill in.

Re: Styling Label of Radio Buttons and Form Fields

SteveHTM — Tue, 16 Jan 2024 21:25:37 GMT

Seems to me that these are two indpendent techniques. When the label is a null string the space above the field collapses to reflect that as in your example.

Betreff: Styling Label of Radio Buttons and Form Fields

Harling — Wed, 17 Jan 2024 08:59:30 GMT

It still would be interesting to have a possibility to style drop box labels different by CSS, but for now the solution to delete the labels is fine for me. I wonder what happens for disabled people with screen reader, if the fields have no label anymore. THis is the reaso why I just set them transparent in the first step.