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

Comment puis-je cibler des champs de saisie de type «texte» à l'aide de sélecteurs CSS?

input[type=text]

ou, pour limiter les entrées de texte à l'intérieur des formulaires

form input[type=text]

ou, pour restreindre davantage à une certaine forme, en supposant qu'il a id myForm

#myForm input[type=text]

Remarque: cela n'est pas pris en charge par IE6, donc si vous souhaitez développer pour IE6, utilisez IE7.js (comme l'a suggéré 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

Puisqu'il est spécifié que les valeurs d'attribut par défaut ne peuvent pas toujours être sélectionnables avec des sélecteurs d'attribut, on pourrait essayer de couvrir d'autres cas de balisage pour lesquels des 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 toujours le cas lorsque le type est défini, mais a une valeur non valide et qui revient toujours à type = "text". 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 la liste des types possibles s'allonge avec de nouvelles fonctionnalités ajoutées au HTML.

Remarque: la :notpseudo-classe n'est prise en charge qu'à partir d'IE9.

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

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

Ceci est pris en charge dans IE7 et supérieur. Vous pouvez utiliser IE7.js pour ajouter la prise en charge de cela si vous devez prendre en charge IE6.

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

J'utilise généralement des sélecteurs dans ma feuille de style principale, puis je 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 puis il suffit de dupliquer 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.

Vous pouvez utiliser le :textsélecteur pour sélectionner toutes les entrées avec du texte de type

Violon de travail

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

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

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

CSS

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

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

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

Comme @Amir l'a signalé ci-dessus, le meilleur moyen de nos jours - cross-browser et laissant derrière IE6 - est d'utiliser

[type=text] {}

Personne n'a mentionné de spécificité CSS inférieure ( pourquoi est- ce important ?) Jusqu'à présent, les [type=text] fonctionnalités 0,0,1,0 au lieu de 0,0,1,1 avec input[type=text].

Côté performances, il n'y a plus d'impact négatif.

normaliser v4.0.0 vient de sortir avec une spécificité de sélecteur réduite .

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

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

entrée [type = texte]

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

Les sélecteurs d'attributs sont souvent utilisés pour les entrées. Voici la liste des sélecteurs d'attributs:

[title] Tous les éléments avec l'attribut title sont sélectionnés.

[title = banana] Tous les éléments qui ont la valeur 'banana' de l'attribut title.

[title ~ = banana] Tous les éléments qui contiennent «banana» dans la valeur de l'attribut title.

[title | = banana] Tous les éléments dont la valeur de l'attribut title commence par 'banana'.

[title ^ = banana] Tous les éléments dont la valeur de l'attribut title commence par 'banana'.

[title $ = banana] Tous les éléments dont la valeur de l'attribut title se termine par 'banana'.

[title * = banana] Tous les éléments dont la valeur de l'attribut title contient la sous-chaîne 'banana'.

Référence: https://kolosek.com/css-selectors/