12

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

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
stemon
  • 599
  • 1
  • 5
  • 23
  • Possible duplicate of [How to select label for="email" in CSS?](http://stackoverflow.com/questions/2599627/how-to-select-label-for-email-in-css) – Octavio Garbarino Oct 13 '16 at 20:55

7 Answers7

19
label[for="secondname"]
{
    display:none;
}
xort
  • 337
  • 2
  • 12
11

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

Jay
  • 1,086
  • 11
  • 25
  • 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. – Nick Brady Mar 14 '21 at 20:58
  • 3
    `visibility: hidden` is bad for a11y as well (`height: 0` too) Good read & advice at: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html – targumon Apr 25 '21 at 13:32
9

Use the attribute selector:

label[for="secondname"] {
    display: none;
}
socki03
  • 344
  • 1
  • 8
2

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

Greg
  • 1,851
  • 2
  • 19
  • 21
1

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;
}
Patrik Rikama-Hinnenberg
  • 1,362
  • 1
  • 16
  • 27
0

Thank you very much! This solution worked for me:

label[for="secondname"] {
    display: none;
}
Promocrat
  • 1
  • It's nice to thank people for their answers but it'd be better to comment under their answers than duplicating their answers. – shaedrich Mar 30 '21 at 09:54
0

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;
}
dmocksen
  • 1