How to hide <label for=""> CSS

Question

I am trying to hide these:

<p>
<label for="secondname"><?php esc_html_e('Last Name','wpestate');?></label>
<input type="text" id="secondname" class="form-control" value="<?php echo $last_name;?>"  name="firstname">
</p>

I managed to hide the Input, but not the label.

#secondname {
  display: none;
}

Thanks

Hydnocarpate

Possible duplicate of How to select label for="email" in CSS? – Thibodeaux

Answer 1

label[for="secondname"]
{
    display:none;
}

Ungraceful

This is not recommended for accessibility reason. Check this answer pointing on the W3C suggestion to visibly hide a label https://mcmap.net/q/792157/-how-to-hide-lt-label-for-quot-quot-gt-css – English

Answer 2

Hiding the label with display: none; is bad for web accesibility and you shouldn't do it. Try visibility: hidden; instead.

Rojas

yep, why I added a label I didn't want to see in the first place. display: block; height: 0; visibility: hidden;. visibility hidden isn't necessary with height of 0.. but good to know it's not supposed to be shown. display has to be block for height to be set to 0 and not affect layout. width could probably use a 0 too, but didn't matter in my case. – Placebo

visibility: hidden is bad for a11y as well (height: 0 too) Good read & advice at: scottohara.me/blog/2017/04/14/inclusively-hidden.html – Repeal

Answer 3

Use the attribute selector:

label[for="secondname"] {
    display: none;
}

Heiser

Answer 4

You can use label[for="secondname"] { display: none }

Wouldbe

Answer 5

Why include the label at all if its hidden? display: none; will hide it from screen readers and most anything else.

Instead, position it off screen:

label[for="secondname"]
{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

Armlet

Answer 6

This would be the recommendation from W3C docs:

'Screen readers and other assistive technology, just as web browsers, hide elements from their user when they are styles using display: none; and visibility: hidden;.'.
https://www.w3.org/WAI/tutorials/forms/labels/#:~:text=The%20label%20can%20be%20hidden,reader%20and%20speech%20input%20users.

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Faraday

Answer 7

Thank you very much! This solution worked for me:

label[for="secondname"] {
    display: none;
}

Jellify

It's nice to thank people for their answers but it'd be better to comment under their answers than duplicating their answers. – Dolichocephalic