web-dev-qa-db-fra.com

input [type = 'text'] Le sélecteur CSS ne s'applique pas aux entrées de texte de type par défaut?

Le type d'entrée par défaut est 'text'. J'ai toujours supposé que les déclarations CSS ciblant input[type='text'] affectaient ces entrées même si le type n'était pas explicitement déclaré sur le contrôle. Cependant, je viens de remarquer que mes entrées de texte de type par défaut ne comprennent pas les styles. pourquoi est-ce le cas? Et comment puis-je résoudre ce problème?

input[type='text'] {
  background: red;
}
<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */
csscss-selectors
63
Yarin

Le CSS utilise uniquement les données de l’arborescence DOM, ce qui a peu à voir avec la façon dont le rendu décide quoi faire avec les éléments avec les attributs manquants.

Donc, soit laisser le CSS refléter le HTML

input:not([type]), input[type="text"]
{
background:red;
}

ou rendre le HTML explicite.

<input name='t1' type='text'/> /* Is Not Red */

S'il ne le faisait pas, vous ne seriez jamais en mesure de faire la distinction entre

element { ...properties... }

et

element[attr] { ...properties... }

parce que tous les attributs seraient toujours définis sur tous les éléments. (Par exemple, table a toujours un attribut border, avec 0 par défaut.)

101
Mr Lister

Selon les spécifications CSS, les navigateurs peuvent utiliser ou non des informations sur les attributs par défaut. surtout le pas. La clause pertinente dans la spécification CSS 2.1 est 5.8.2 Valeurs d'attribut par défaut dans les DTD . Dans CSS 3 Selectors, la clause 6.3.4 , portant le même nom. Il recommande: "Les sélecteurs doivent être conçus de manière à fonctionner, que les valeurs par défaut soient incluses ou non dans l’arborescence du document."

Il est généralement préférable de spécifier explicitement des attributs essentiels tels que type=text au lieu de les remplacer par défaut. La raison en est qu’il n’existe pas de moyen simple et fiable de se référer aux éléments input avec l’attribut par défaut type.

7
Jukka K. Korpela

Parce que ce n'est pas supposé le faire.

input[type=text] { } est un sélecteur d'attribut et ne sélectionne que ces éléments, avec l'attribut correspondant.

6
Starx

Pour être compatible avec tous les navigateurs, vous devez toujours déclarer le type d'entrée.

Certains navigateurs considèrent le type par défaut comme "texte", mais ce n'est pas une bonne pratique.

1
aguante