input[type='text'] sélecteur CSS ne s'applique pas à la valeur par défaut type de saisie de textes?

D'entrée par défaut est de type 'texte'. J'ai toujours assumé alors que les déclarations CSS ciblage input[type='text'] aurait une incidence sur ces entrées, même si le type n'a pas été explicitement déclaré sur le contrôle. Cependant, je viens de remarquer que mon défaut de type texte des entrées de ne pas obtenir les styles. Pourquoi est-ce le cas? Et comment puis-je résoudre ce problème?

CSS:

input[type='text'] {
  background: red;
}

HTML:

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

  • Les sélecteurs CSS cible de l'attribut dans la balise et non son hypothèse par défaut.
InformationsquelleAutor Yarin | 2012-03-07
  1. 99

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

    Afin de laisser le CSS refléter le code HTML

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

    ou faire de l'HTML explicite.

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

    Si elle n'a pas à le faire, vous ne seriez jamais capable de distinguer entre

    element { ...properties... }

    et 

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

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

    • input:not([type]), input[type="text"] pour couvrir les deux cas.
    • Oui; je n'avais pas pensé à cela.
    • Ne savait jamais sur input:not([type]) sélecteur résout mon problème
    • Je dirais que c'est surtout un code HTML/DOM problème, plutôt que d'un CSS un. En HTML, <table><tr></tr><table> implicitement devient <table><tbody><tr></tr></tbody></table>, de sorte qu'il est assez étrange que <input> ne pas implicitement devenir <input type="text"> dans les DOM.
    • Ce n'est pas étrange; ceux-ci sont simplement différents cas. La définition de HTML est très précis à ce sujet: la tbody élément est défini plus précisément comme étant obligatoire, mais avoir une option de balise de début. Ou en d'autres termes, la tbody est là, même si vous n'avez pas <tbody> dans votre code source HTML. Le type attribut dans input d'autre part, n'est pas obligatoire. Et le comportement de input sans type se trouve être le même que input avec type='text, mais c'est une coïncidence, et qui n'a rien à voir avec l'arborescence DOM.
    • À mon avis, c'est juste de la technicité. Et de mon point était exactement ce que la "définition du terme "HTML" est étrange. Du point de vue de personnes qui ont besoin d'écrire du CSS, c'est probablement ce qui se sent à l'auto-incompatibles: table>tbody>tr sélectionnez <table><tr><tr></table>, mais input[type="text"] ne sélectionnez pas <input>.
    • Ne correspond pas à la saisie de texte de l'élément lorsque la valeur de ses type chaîne a d'autres personnages (comme les espaces et les caractères non valides).
    • La valeur de la type attribut n'est pas censé avoir d'autres personnages comme les espaces et les caractères non valides. Et l'auteur de la css n'est pas tenu de fournir pour les fautes de frappe dans le code HTML.
    • Il n'est pas censé avoir, mais passe. Je dis Notez bien, qu'il y a va encore être de texte de saisie des éléments ne correspondant pas aux règles ci-dessus.
    • Et j'ai répondu, l'auteur de la css n'est pas tenu de fournir pour les fautes de frappe dans le code HTML et je m'en tiens à cela. Des erreurs dans le code HTML doit être corrigé, pas masqué à l'écart par les CSS.
    • À laquelle j'avais répondu: "mais il se passe, notez donc il y aura encore de texte de saisie des éléments ne correspondant pas aux règles ci-dessus".

    InformationsquelleAutor Mr Lister
  2. 7

    Par les spécifications CSS, les navigateurs peuvent ou ne peuvent pas utiliser les informations sur les attributs par défaut, la plupart ne le sont pas. La clause pertinente dans le CSS 2.1 spec est 5.8.2 valeurs d'attribut par Défaut dans la Dtd. Dans les Sélecteurs CSS 3, c'est la clause 6.3.4, avec le même nom. Il recommande: “Sélecteurs doit être conçu de sorte qu'ils travaillent ou non les valeurs par défaut sont inclus dans le document de l'arbre.”

    Il est généralement préférable de spécifier explicitement les attributs essentiels tels que type=text au lieu de retomber entre eux. La raison en est qu'il n'est pas simple moyen fiable pour se référer à la input éléments à défaut type attribut.

    • +1, remarquez comment le mot "doit" n'est jamais utilisé n'importe où dans cette section (sauf à l'intérieur d'un exemple pour décrire un autre en cascade de l'émission).
    • Ce qui est important, c'est réel du comportement du navigateur. Et il semble qu'aucun navigateur n'a que.....
    InformationsquelleAutor Jukka K. Korpela
  3. 6

    Parce que, il n'est pas censé le faire.

    input[type=text] { } est un sélecteur d'attributs, et permettra de sélectionner uniquement celles de l'élément avec l'attribut correspondant.

    InformationsquelleAutor Starx
  4. 1

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

    Certains navigateurs supposons par défaut de type "texte", mais ce n'est pas une bonne pratique.

    • Ceci répond à la question comment?
    • -1, Cela ne répond pas à la question.
    • Ce serait bien qu'un commentaire si
    InformationsquelleAutor aguante
  5. -1

    essayer cette

     input[type='text']
 {
   background:red !important;
 }
    InformationsquelleAutor azzeth_alhavizh