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

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  style="width: 50%;" id="wrap_Inputfield_company_registration_number" data-original-width="50">
  <label  for="Inputfield_company_registration_number">Company Registration Number</label>
  <div >
    <input id="Inputfield_company_registration_number"  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?

CodePudding user response：

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.

CodePudding user response：

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 >
  <input type="text" id="textInput" placeholder="text input">
  <label for="textInput">Text Input</label>
</div>
<div >
  <input type="number" id="numberInput" placeholder="number input">
  <label for="numberInput">Number Input</label>
</div>
<div >
  <input type="password" id="passInput" placeholder="p455w0rd input">
  <label for="passInput">Password Input</label>
</div>
<div >
  <input type="email" id="emailInput" placeholder="[email protected]">
  <label for="emailInput">Email Input</label>
</div>
<div >
  <textarea id="textareaInput">Textarea</textarea>
  <label for="textareaInput">Textarea Input</label>
</div>