wake-up-neo.com

Wie kann ich die Elementbeschriftung nach der Element-ID in CSS ausblenden?

Nehmen wir an, ich habe diesen Code

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

Dadurch wird die Eingabe ausgeblendet:

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

Wie kann ich das Etikett ausblenden?

cssinputlabel
13
Stoob

Wenn Sie dem Etikett eine ID geben, wie folgt:

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

Dann würde das funktionieren:

#foo_label { display: none;}

Ihre anderen Optionen sind nicht wirklich Cross-Browser-freundlich, es sei denn, Javascript ist eine Option. Der CSS3-Selektor sieht nicht so breit aus:

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

Wenn Sie sich nicht für IE6-Benutzer interessieren, verwenden Sie den Equality-Attributselektor .

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

Ohne Klasse oder ID und mit Ihrem spezifischen HTML-Code:

table tr td label {display:none}

Ansonsten, wenn Sie jQuery haben

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

Sie müssen dem Etikett auch eine eigene ID geben.

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

#foo_label {display: none;}

Oder verstecken Sie die ganze Reihe

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

#foo_row {display: none;}
1
Draco Ater

Sie sollten Ihrem <tr>-Tag eine ID foo_row oder was auch immer geben. Und verstecken Sie das stattdessen

0
ghoppe

Sie müssen wahrscheinlich eine Klasse/ID hinzufügen und dann eine weitere CSS-Deklaration machen, die sie ebenfalls verbirgt.

0
steve

Das ist für mich gearbeitet. 

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

Trotz anderer Antworten sollten Sie nicht mit display:none das Beschriftungselement ausblenden. 

Die einfachste Möglichkeit, ein Label visuell auszublenden, ist die Verwendung einer 'off-left'- oder' clip'-Regel in Ihrem CSS. Die Verwendung von display:none verhindert, dass Personen, die Bildschirmlesegeräte verwenden, Zugriff auf den Inhalt des Kennsatzelements haben. Die Verwendung von display: none verbirgt den Inhalt von all - Benutzern, und dies schließt auch Screenreader-Benutzer ein (die am meisten von Etikettenelementen profitieren).

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

Das W3C und WAI bieten weitere Anleitungen zu diesem Thema, einschließlich CSS für die 'Clip'-Technik. 

0
Kerri