CODEWITHSUNDEEP
htmlformsinput
DanielAttard
DanielAttard

Reputation: 3615

Hide HTML element so it does not take up any space

Can someone explain how I can modify the second input id shown below so that it is not visible on the page and also does not take up any space on the page? 

    <section>
    <label for="muni">Municipality</label>
    <div>
    <input id="county_select" type="text" />
    <input id="county_no" type="text" value="" disabled="disabled" style="visibility:hidden" />
    </div>
    </section>

Currently, this second input id takes up space on my form and I don't want it to take up any space. Thank you.

Upvotes: 2

Views: 5083

Answers (4)

user1161778
user1161778

Reputation:

You can style the input using CSS, targeting it via its id tag.

In your .css file:

#county_no { display: none; }

Styling HTML inline should be avoided.

Upvotes: 1

dellsala
dellsala

Reputation: 942

Use the style="display:none;" instead of visibility:hidden

visibility:hidden leaves space.

Upvotes: 3

Justin Thomas
Justin Thomas

Reputation: 5848

display:none in stead of visibility:hidden

Upvotes: 3

David Thomas
David Thomas

Reputation: 253318

Use display: none;, as shown:

<input id="county_no" type="text" value="" disabled="disabled" style="display: none;" />

Reference:

Upvotes: 9

Related Questions