How to hide an input-box with CSS

Question

The code underneath will show Fax and an input-box. I manage to hide the text "Fax" but I'm not able to hide the input-box. How can I hide the input-box using CSS and Javascript?

<div class="field">
    <label for="billing:fax">Fax</label>
    <div class="input-box">
       <input id="billing:fax" class="input-text " type="text" title="Faxnummer"    value="" name="billing[fax]">
    </div>
</div>

"I manage to hide the text Fax" So how'd you do that? And where's the CSS you tried? — j08691
– j08691, Commented Jul 7, 2015 at 20:13
Here's the CSS code that hide the text Fax: label[for="billing:fax"] { display:none; } — Peter
– Peter, Commented Jul 7, 2015 at 20:20

j08691 · Accepted Answer · 2015-07-07 20:28:12Z

1

To hide that specific input you can select it by the ID, but you need to escape the :

#billing\:fax {
  display: none;
}

<div class="field">
  <label for="billing:fax">Fax</label>
  <div class="input-box">
    <input id="billing:fax" class="input-text " type="text" title="Faxnummer" value="" name="billing[fax]">
  </div>
</div>

There are of course, many ways to select an element in CSS. Another way would be to use the adjacent sibling (+) and descendant (>) selectors to get to the input:

 label[for="billing:fax"] + div.input-box > input

answered Jul 7, 2015 at 20:28

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Huang · Accepted Answer · 2015-07-07 20:11:47Z

0

You can use Javascript to toggle the input property type="hidden" for the input box.

http://www.echoecho.com/htmlforms07.htm

answered Jul 7, 2015 at 20:11

Jonathan Huang

12 bronze badges

Comments

Just Do It · Accepted Answer · 2015-07-07 20:25:11Z

0

display: none; is your best solution if you just wanna hide the field.

answered Jul 7, 2015 at 20:25

Just Do It

4861 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to hide an input-box with CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related