3

I have a hidden element on my page with id select-box:

<select style="display:none;" id="select-box">

There's a <label> at the top of my page:

<label for="select-box">Select box</label>

Because the <select> is hidden, clicking on the <label> has no effect. Is there a way to achieve this, preferably without using any JavaScript?

Bas Peeters
  • 3,269
  • 4
  • 33
  • 49
  • 5
    Achieve what exactly? If the select is not there, how is the user expected to use it? Also, this is a form element, not an anchor. – BoltClock May 21 '15 at 16:23

2 Answers2

3

The css feature display:none; removes the element from the document.

try:

style="visibility:hidden; width:0px"

visibility:hidden keeps the element in the dom and also takes up space so I've given a width of 0px to ensure no blank space will remain.

KpTheConstructor
  • 3,153
  • 1
  • 14
  • 22
2

Ignoring the fact you are missing the link to your anchor in what you posted, you're right it looks like "display:none" anchors don't work (see: http://jsfiddle.net/odwneeL7/). But you can easily just make an anchor with no content beside what you want to link to, eg:

<label for="select-box"><a href="#select-box-anchor">Select box</a></label><br/>

...content...

    <a id="select-box-anchor"></a><select style="display:none;" id="select-box">

See fiddle: http://jsfiddle.net/odwneeL7/1/

Andrew
  • 18,680
  • 13
  • 103
  • 118
  • 1
    I don't think the OP intended to use an anchor. It sounds like he wanted the label to focus a hidden ` – showdev May 21 '15 at 17:20