Display None on label calling by ID does not work in Safari browser

Question

I think some experienced will know how to answer me!

I can not make the code below work in Safari browser and older versions of Opera. I have tested in all others and works perfectly even in IE >= 9!

<style>
#teste{display:none;}
</style>

   <label for="teste" >
           chamar input
           <br>
           <br>
           <br>
       <input type="file" id="teste" name="image"/>
  </label>

I can only make it work with visibility:Idden, only the proposal is not to occupy the space of the div and visibility does this.

I thank you all.

Answer 1

Instead of hiding the input, use another property in conjunction with the visibility: hidden:

position: absolute;

Both properties have support in prehistoric browsers. So the input will not take up space in the div and will become invisible.

#teste{
   position: absolute;
   visibility: hidden;
}

<label for="teste" >
   chamar input
   <br>
   <input type="file" id="teste" name="image"/>
   outra linha após o input invisível
</label>

Answer 2

I’m going to leave a slightly more semantic approach with a focus on accessibility. It starts from the approach suggested by Bootstrap. Using display:none there is no way to guarantee that the element will be accessible to screen readers

Briefly enough you create a class, called sr-only, and that you will use in all the elements that you want to hide from the screen, but want to make accessible to the screen readers

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

After that you need to label the element so that the screen reader identifies what it is, for that you will use the attributes aria-label and aria-labelledby.

What this labelling does is something like ALT used in the images, but the aria vc can use in any element. The aria-label will tell the discretion of the label, and in the label you put a id that will be an "anchor" of aria-labelledby of input to say that he is the input of label with the aria-label

<label for="teste" aria-label="incluir arquivo" id="arquivo">
    texto antes de chamar input
    <input class="sr-only" type="file" id="teste" name="image" aria-labelledby="arquivo"/><br>
    texto depois do input
</label>

Here in this Google documentation you can read more about aria-label and aria-labelledby https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=pt-br

And this is the end result, see that there is no space between one line and another.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

<label for="teste" aria-label="incluir arquivo" id="arquivo">
    texto antes de chamar input
    <input class="sr-only" type="file" id="teste" name="image" aria-labelledby="arquivo"/><br>
    texto depois do input
</label>