Styling Label of Radio Buttons and Form Fields

[Harling]

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?

[Harling]

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.

[SteveHTM]

@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

[Harling]

@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.

[SteveHTM · Accepted solution]

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.