web-dev-qa-db-fra.com

Comment empêcher les feuilles de style d'agent utilisateur de remplacer mon css

J'essaie de définir curseur: pointeur sur un élément dom, mais l'entrée ne le prend pas (je ne vois pas de curseur pointeur lorsque je survole la case à cocher). En chrome, je vois que la "feuille de style de l'agent utilisateur" remplace mon css. Wtf?

<!doctype html>
<body>
    <div class='a'>
        <input type='checkbox'>
    </div>

    <style>
        .a {
            cursor: pointer;
        }
    </style>
</body>

J'ai vu cette question: Pourquoi la feuille de style de l'agent utilisateur remplace-t-elle mes styles? Mais mon problème ne semble pas être le doctype, qui est le doctype recommandé .

En utilisant !important n'est pas acceptable ici, ni le style du nœud d'entrée directement - je ne devrais pas m'inquiéter des styles bizarres d'agent d'utilisateur de navigateur. Que se passe-t-il?

Pour clarifier, ma question porte sur les raisons pour lesquelles la feuille de style de l’agent d’utilisateur remplace le css et sur la façon de faire cet arrêt . Ma question est pas comment je peux pirater ce comportement. Si je ne me trompe pas, le comportement correct de css est que le style de curseur doit être hérité par les nœuds enfants.

Est-ce le comportement attendu de css?

cssgoogle-chromefirefox
36
B T

Le "problème" est qu’il n’ya en réalité aucun style input dans la feuille de style de l’auteur (voir la spécification pour plus d’informations), et donc le style qui est défini dans la feuille de style de l'agent utilisateur utilisée.

La règle de l'agent utilisateur (pertinente) (sur chrome) est la suivante:

input, input[type="password"], input[type="search"] {
   cursor: auto;
}

Vous pouvez réaliser ce que vous voulez de plusieurs manières:

  1. Créez une classe CSS qui sélectionne directement l'entrée, par exemple
    • en utilisant une autre classe css, ou
    • sélectionner l'entrée dans la classe déjà définie,
    • etc
  2. Définition explicite du comportement d'héritage pour le style du curseur sur toutes les entrées

Pour 1):

<style>
  .a, .a input {
      cursor: pointer;
  }
</style>

Pour 2):

<style>
  input {
      cursor: inherit;
  }
  .a {
      cursor: pointer;
  }
</style>
20
Beterraba

Il semblerait que css soit simplement css, ce qui est regrettable. La solution la plus générale que je puisse trouver est de définir ce css:

<style>
  input {
    cursor: inherit;    
  }
</style>

Cela permet le comportement que je m'attendais à l'origine dans tous les cas où l'agent utilisateur ferait autrement que le style n'hérite pas. Cela vaut mieux que de styler l'entrée avec "cursor: pointer" directement parce que vous ne devez définir ce style qu'une seule fois, et tout domNode avec un style "cursor: pointeur" contenant une entrée aura automatiquement un curseur de pointeur pour l'entrée.

3
B T

Répondant généralement à cette question en élaborant l'explication, je dirais que la valeur finale de la propriété css est un calcul en quatre étapes (c.-à-d. Spécification, calculée, utilisée et réelle) selon this post.

Dans la spécification, La mise en cascade a la priorité sur l'héritage .

Comme vous n'avez aucune propriété css en entrée, la feuille de style de l'agent utilisateur appliquée à l'entrée a priorité sur la valeur héritée de la classe a. Pour utiliser la valeur héritée, vous devez remplacer le code, comme suggéré par @B T. ie.

<style>
  input {
    cursor: inherit;    
  }
</style>

Explication de la cascade:

Brève explication
Explication détaillée

Je me réfère explication détaillée ici -
Trois principaux concepts contrôlent l’ordre dans lequel les déclarations CSS sont appliquées:

  1. Importance
  2. Spécificité
  3. Ordre source

L'importance d'une déclaration CSS dépend de l'endroit où elle est spécifiée. Les déclarations contradictoires seront appliquées dans l'ordre suivant; les plus récents remplaceront les précédents:

  1. Feuilles de style de l'agent utilisateur
  2. Déclarations normales dans les feuilles de style utilisateur
  3. Déclarations normales dans les feuilles de style d'auteur
  4. Déclarations importantes dans les feuilles de style de l'auteur
  5. Déclarations importantes dans les feuilles de style utilisateur

la spécificité et l'ordre des sources ne sont pas pertinents pour cette question, vous pouvez vous reporter aux références ci-dessus pour des explications identiques

Dans le code ci-dessus, étant donné que vous n'avez que la feuille de style de l'agent utilisateur liée directement à l'élément, a donc priorité.

En bref, héritage <cascading <importance <feuille de style de l'agent utilisateur est l'ordre de priorité dans votre cas.

3
Keshav

Je pensais avoir ce problème et vérifié les suspects habituels, Doctype, etc. Aussi ridicule que cela puisse paraître, il s'est avéré que le style qui, à mon avis, était appliqué a été commenté dans le CSS. Cependant, Chrome affichait le style comme s'il s'agissait d'un style réel et était remplacé.

0
LarryBud