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

Question

Comment puis-je cibler les champs de saisie de type "text" à l'aide de sélecteurs CSS ?

Answer 1

input[type=text]

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

form input[type=text]

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

#myForm input[type=text]

Avis : Cette fonctionnalité n'est pas prise en charge par IE6. 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

---

Parce que il est précisé que les valeurs d'attributs par défaut ne sont pas toujours sélectionnables avec des sélecteurs d'attributs, 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' */

Il reste encore le cas où le type est défini, mais a une valeur invalide, ce qui revient à type="text". Pour couvrir ce cas, nous pouvons utiliser la fonction "select all inputs" qui n'est pas l'un des autres types connus.

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

Mais ce sélecteur serait tout à fait ridicule et aussi la liste des types possibles se développe avec l'ajout de nouvelles fonctionnalités au HTML.

Remarque : le :not pseudo-classe n'est pris en charge qu'à partir d'IE9.

Answer 2

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

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

Cette fonction est prise en charge par les versions IE7 et supérieures. Vous pouvez utiliser IE7.js pour ajouter ce support si vous devez supporter IE6.

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

Answer 3

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 ensuite, il suffit de dupliquer mes styles dans la feuille de style spécifique à ie6 en utilisant les classes. De cette façon, le balisage actuel est un peu plus propre.

Answer 4

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

Violon de travail

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

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

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

CSS

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

Answer 5

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

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