web-dev-qa-db-fra.com

Sélecteur CSS pour les champs de saisie de texte?

Comment cibler des champs de saisie de type 'texte' à l'aide de sélecteurs CSS? 

htmlcssformscss-selectorshtml-input
342
Yarin
input[type=text]

ou, pour limiter les entrées de texte dans les formulaires

form input[type=text]

ou, pour limiter davantage à une certaine forme, en supposant qu'elle ait id myForm

#myForm input[type=text]

Remarque: Ceci n'est pas supporté par IE6, donc si vous voulez développer pour IE6, utilisez IE7.js (comme suggéré par Yi Jiang) ou commencez à ajouter des classes à toutes vos entrées de texte.

Référence: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Parce que il est spécifié que les valeurs d'attribut par défaut peuvent ne pas toujours être sélectionnables avec les sélecteurs d'attribut, on pourrait essayer de couvrir d'autres cas de balisage pour lesquels les entrées de texte sont rendues:

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

Cela laisse quand même le cas lorsque le type est défini, mais que sa valeur est invalide et que le type = "text" est toujours utilisé. Pour couvrir cela, nous pourrions utiliser sélectionner toutes les entrées qui ne sont pas l'un des autres types connus

input:not([type=button]):not([type=password]):not([type=submit])...

Mais ce sélecteur serait assez ridicule et le liste des types possibles _ s'agrandit avec l'ajout de nouvelles fonctionnalités au HTML.

Remarque: la :not pseudo-class est uniquement prise en charge à partir de IE9.

630
Alin Purcaru

Vous pouvez utiliser le sélecteur d'attribut ici: 

input[type="text"] {
    font-family: Arial, sans-serif;
}

Ceci est supporté dans IE7 et supérieur. Vous pouvez utiliser IE7.js pour ajouter un support pour cela si vous avez besoin de supporter IE6. 

Voir: http://reference.sitepoint.com/css/attributeselector pour plus d'informations

37
Yi Jiang

J'utilise généralement des sélecteurs dans ma feuille de style principale, puis crée un fichier .js (jquery) spécifique à ie6 qui ajoute une classe à tous les types d'entrée. Exemple:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

Et ensuite, dupliquez simplement mes styles dans la feuille de style spécifique ie6 en utilisant les classes. De cette façon, le balisage réel est un peu plus propre.

14
garrettwinder

Vous pouvez utiliser le sélecteur :text pour sélectionner toutes les entrées avec un texte de type.

Travailler Fiddle

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:text est une extension jQuery et ne fait pas partie de la spécification CSS. Les requêtes utilisant: text ne peuvent pas tirer parti des améliorations de performances fournies par la méthode native querySelectorAll () du DOM. Pour de meilleures performances dans les navigateurs modernes, utilisez plutôt [type="text"]. Cela fonctionnera pour IE6+.

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}
6
Aamir Shahzad

J'ai eu le champ de texte de type d'entrée dans un champ de ligne de table. Je le cible avec du code

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}
2
Amit Mhaske

Comme @Amir a indiqué ci-dessus, la meilleure façon de procéder aujourd'hui - avec plusieurs navigateurs et en laissant derrière IE6 - est d'utiliser

[type=text] {}

Personne n'a mentionné une spécificité CSS inférieure ( pourquoiestqueimportant ?) Jusqu'à présent, [type=text]caractéristiques 0,0,1,0 au lieu de 0,0, 1,1 avec input[type=text].

En termes de performances, il n’ya plus d’impact négatif. 

normalize v4.0.0 vient de paraître avec une spécificité de sélecteur réduite .

0
Volker E.

Avec le sélecteur d'attribut, nous ciblons le texte du type d'entrée en CSS

input[type=text] {
background:gold;
font-size:15px;
 }
0
Santosh Khalse

entrée [type = texte]

Ceci sélectionnera tout le texte de type d'entrée dans une page Web.

0
Navneet Kumar