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

Question

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?

Answer 1

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.

Answer 2

The HTML structure needs to change if you want a CSS only solution. The label needs to come after the input/textarea and the input/textarea can't have a parent -- basically label and input need to be siblings, and label needs to come after input, it's the squiggly ~ that makes this possible (read more about Subsequent-sibling combinator if interested)
.input-field { display: flex }
.input-field label { margin-right: 1rem; order: -1 }
.input-field input[type=text]~label, .input-field textarea~label { display: none }
<div class="input-field">
<input type="text" id="textInput" placeholder="text input">
<label for="textInput">Text Input</label>
</div>
<div class="input-field">
<input type="number" id="numberInput" placeholder="number input">
<label for="numberInput">Number Input</label>
</div>
<div class="input-field">
<input type="password" id="passInput" placeholder="p455w0rd input">
<label for="passInput">Password Input</label>
</div>
<div class="input-field">
<input type="email" id="emailInput" placeholder="01#email.input">
<label for="emailInput">Email Input</label>
</div>
<div class="input-field">
<textarea id="textareaInput">Textarea</textarea>
<label for="textareaInput">Textarea Input</label>
</div>