web-dev-qa-db-fra.com

Comment masquer le libellé d'un élément par son identifiant dans CSS?

Disons que j'ai ce code

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

Cela cachera l'entrée:

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

Comment cacher l'étiquette?

cssinputlabel
13
Stoob

Si vous donnez un identifiant à l'étiquette, comme ceci:

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

Alors ceci fonctionnerait:

#foo_label { display: none;}

Vos autres options ne sont pas vraiment compatibles avec plusieurs navigateurs, sauf si javascript est une option. Le sélecteur CSS3, moins largement pris en charge, ressemble à ceci:

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

Si vous ne vous souciez pas des utilisateurs d'IE6, utilisez le sélecteur d'attributs quality .

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

Sans classe ni identifiant, et avec votre code HTML spécifique:

table tr td label {display:none}

Sinon si vous avez jQuery

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

Vous devez également attribuer un identifiant à l’étiquette.

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

#foo_label {display: none;}

Ou cacher toute la ligne

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

#foo_row {display: none;}
1
Draco Ater

Vous devriez donner à votre balise <tr> un identifiant foo_row ou autre chose. Et cache ça à la place

0
ghoppe

Vous devrez probablement ajouter une classe/id à puis faire une autre déclaration CSS qui la cache.

0
steve

Ceci a fonctionné pour moi. 

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

Malgré d'autres réponses, vous devriez pas utiliser display:none pour masquer l'élément label. 

Le moyen accessible de masquer visuellement une étiquette consiste à utiliser une règle "gauche" ou "clip" dans votre CSS. Utiliser display:none empêchera les personnes utilisant des lecteurs d'écran d'avoir accès au contenu de l'élément label. Utilisation de display: none masque le contenu des utilisateurs all, y compris les utilisateurs de lecteurs d'écran (qui bénéficient le plus des éléments d'étiquette).

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

Le W3C et WAI offrent davantage de conseils sur ce sujet, y compris CSS pour la technique du "clip". 

0
Kerri