How to hide element label by element id in CSS?
Despite other answers here, you should not use display:none
to hide the label element.
The accessible way to hide a label visually is to use an 'off-left' or 'clip' rule in your CSS. Using display:none
will prevent people who use screen-readers from having access to the content of the label element. Using display:none hides content from all users, and that includes screen-reader users (who benefit most from label elements).
label[for="foo"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The W3C and WAI offer more guidance on this topic, including CSS for the 'clip' technique.
If you give the label an ID, like this:
<label for="foo" id="foo_label">
Then this would work:
#foo_label { display: none;}
Your other options aren't really cross-browser friendly, unless javascript is an option. The CSS3 selector, not as widely supported looks like this:
[for="foo"] { display: none;}