How to hide form labels via CSS?

[#1]

Hello there! I'm trying to style my HubSpot form that is embeded onto my WordPress website page via a code module. In the chrome inspector I can easily hide the form field labels by using: .hs-form-field label { display: none; } but that doesn't work from my .css stylesheet. Even with extra targeting like a div ID and the HubSpot form ID, nothing works. Is there a recommended or easier way to hide the HubSpot form labels? I only want the placeholder text in the fields and the fields themselves. Thank you in advance!

How it looks vs. how I want it to look.

[#2]

Hi @lisa8 

.hs-form-field label is the correct selector and display:none should work, so there must be something overriding your style or preventing the updated stylesheet from loading on your page.

Can you share the URL where this form is located?

[#3]

http://gator3051.temp.domains/~clinicalarch/solutions/content-acquisition/

The form is at the bottom. If hiding the form labels hurts assistive technologies, is there something else I should do instead of hide them? My issue is, with the labels above the fields the form takes up far too much space. I need the labels to be placeholders in the fields.

Thanks so much!

[#4]

So I spoke with live chat support, the only way to target the form field labels is if I embed the form into my page as raw HTML (it's an iFrame otherwise). In my form settings there is a toggle at the top that sets it as raw HTML, only problem is it then strips ALL of the styling away. So I either have to style the form from scratch or deal with the field labels. I'll have to decide which route I want to go.

Thanks for all of your help!

[#5]

If you absolutely have to hide form labels I would not use display:none; to do it. You will render the form useless to people relying on assistive technologies, as well as make it hard for those with memory issues to fill out the form.

If you really have to make the label be invisible, there are better ways of doing it without hurting screenreaders. You will still be hurting users with memory related issues as placeholder text does not stay visible once you start entering something into a field.
https://webaim.org/techniques/css/invisiblecontent/