web-dev-qa-db-ja.com

CSSで要素IDによって要素ラベルを非表示にする方法は？

私はこのコードを持っているとしましょう

<table>
    <tr>
        <td><input id="foo" type="text"></td>
        <td><label for="foo">This is foo</label></td>
    </tr>
</table>

これにより、入力が非表示になります。

#foo { display: none;}  /* or hidden could work too, i guesss */

ラベルを非表示にするにはどうすればよいですか？

cssinputlabel
15
Stoob

次のようにラベルにIDを指定すると：

<label for="foo" id="foo_label">

その後、これは動作します：

#foo_label { display: none;}

Javascriptがオプションでない限り、他のオプションは実際にはクロスブラウザーフレンドリーではありません。広くサポートされていないCSS3セレクタは次のようになります。

[for="foo"] { display: none;}
24
Nick Craver

IE6ユーザーを気にしない場合は、 equality attribute selector を使用します。

label[for="foo"] { display:none; }
12
Andy E

クラスまたはIDがなく、特定のhtmlがある場合：

table tr td label {display:none}

それ以外の場合はjQueryを持っている場合

$('label[for="foo"]').css('display', 'none');
7
James Westgate

ここに他の答えがありますが、ラベル要素を非表示にするためにdisplay:noneを使用する必要がありますnot.

ラベルを視覚的に非表示にするアクセス可能な方法は、CSSで「オフレフト」または「クリップ」ルールを使用することです。 display:noneを使用すると、スクリーンリーダーを使用するユーザーがlabel要素のコンテンツにアクセスできなくなります。 display：noneを使用すると、allユーザーからコンテンツが非表示になります。これには、スクリーンリーダーユーザー（ラベル要素の恩恵を最も受けるユーザー）が含まれます。

label[for="foo"] { 
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

W3CおよびWAI は、「クリップ」テクニックのCSSなど、このトピックに関する詳細なガイダンスを提供します。

2
Kerri

ラベルにも別のIDを指定する必要があります。

<label for="foo" id="foo_label">text</label>

#foo_label {display: none;}

または、行全体を非表示にします

<tr id="foo_row">/***/</tr>

#foo_row {display: none;}
1
Draco Ater

<tr> IDにタグを付けるfoo_rowまたは何でも。代わりにそれを隠す

0
ghoppe

おそらくクラス/ IDを追加してから、それを非表示にする別のCSS宣言を作成する必要があります。

0
steve

これは私のために働いています。

#_account_id{
        display: none;
    }
    label[for="_account_id"] { display: none !important; }
0
Naveenbos