How to hide for only text input fields CSS

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?

This is one of the form fields `Company Registration Number ` — TridentMarketingUK, Jun 14 '22 at 15:25
CSS will VERY likely not work here, because CSS selector can only has one direction down the DOM tree: parent to child, previous sibling to next sibling. — Passerby, Jun 14 '22 at 15:34
Keep in mind that you are using the placeholder attribute wrong. It is not a replacement for a *cool* label which sits inside the input. Use a correct placeholder and keep the label. — cloned, Jun 14 '22 at 15:36

score 0 · Accepted Answer · answered Jun 14 '22 at 15:32

0

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.

answered Jun 14 '22 at 15:32

Nayeem M. Muzahid

141
6

Thank you so much for this - I'd seen this but I've got 53 fields and didn't want to have to do label[for='a'] etc for each one, but if there isnt a way to do label[for[type=text]] then that might be the only way. – TridentMarketingUK Jun 14 '22 at 15:36

Simp4Code · Answer 2 · 2022-06-14T15:58:21.903

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>

How to hide for only text input fields CSS

2 Answers2