CODEWITHSUNDEEP
javascriptcssforms
Peter
Peter

Reputation: 53

How to hide an input-box with CSS

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>

Upvotes: 0

Views: 3288

Answers (3)

j08691
j08691

Reputation: 207901

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

Upvotes: 1

Just Do It
Just Do It

Reputation: 486

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

Upvotes: 0

Jonathan Huang
Jonathan Huang

Reputation: 1

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

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

Upvotes: 0

Related Questions