[SOLVED] How to hide <label> for only text input fields CSS

How to hide <label> for only text input fields CSS

I have some code on a processwire website, I'm adding new css to a form and I want to hide the label for text and textarea inputs, but show the label on everthing else.

This hides the label (class is InputfieldHeader) :

#FormBuilder_contact-form .Inputfield .InputfieldHeader {
display: none;
}

I tried using label[for="type=text"], I also tried .InputfieldHeader input([type=text])

but I cannot seem to get the css to work and googling hide label with CSS just doesn't bring up anything relevant.

This is the html for one of the form fields:

<div class="Inputfield Inputfield_company_registration_number InputfieldText InputfieldStateRequired InputfieldColumnWidth" style="width: 50%;" id="wrap_Inputfield_company_registration_number" data-original-width="50">
  <label class="InputfieldHeader InputfieldStateToggle" for="Inputfield_company_registration_number">Company Registration Number</label>
  <div class="InputfieldContent ">
    <input id="Inputfield_company_registration_number" class="required InputfieldMaxWidth" name="company_registration_number" type="text" maxlength="2048" placeholder="Company Registration Number (If applicable)">
  </div>
</div>

I've got 53 form fields so I was hoping to avoid using css for label for field1, label for field2 etc Any ideas?

Solution

Checkout this example--

HTML-

<label for="a">Label A</label>
<input type="text" id="a">

<label for="b">Label B</label>
<input type="text" id="b">

<label for="c">Label C</label>
<input type="text" id="c">

CSS-

label[for='a'], label[for='b'] {
  display: none;
}

This code snippet hide labels for A and B input.

Based on your code

label[for='Inputfield_company_registration_number'] {
   display: none;
}

this will work fine.