How to hide element label by element id in CSS

Question

Let s say I ve got this code   lt table gt       lt tr gt           lt td gt  lt input id  foo  type  text  gt  lt  td gt           lt td gt  lt label for  foo  gt This is foo lt  label gt  lt  td gt       lt  tr gt   lt  table gt    This will hide the input    foo   display  none       or hidden could work too  i guesss      How do I hide the label

User · Answer

Without a class or an id  and with your specific html   table tr td label  display none    Otherwise if you have jQuery     label for  foo     css  display    none

User · Answer

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

User · Answer

This is worked for me      account id          display  none            label for   account id     display  none  important

User · Answer

You have to give a separate id to the label too    lt label for  foo  id  foo label  gt text lt  label gt    foo label  display  none     Or hide the whole row   lt tr id  foo row  gt       lt  tr gt    foo row  display  none

User · Answer

If you don t care about IE6 users  use the equality attribute selector   label for  foo     display none

User · Answer

You probably have to add a class id to  and then make another CSS declaration that hides it as well

User · Answer

If you give the label an ID  like this    lt label for  foo  id  foo label  gt    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

User · Answer

You should give your  lt tr gt  tag an id foo row or whatever  And hide that instead

[css] How to hide element label by element id in CSS?

Examples related to css

Examples related to input

Examples related to label