BinaryDevelop
  1. ホーム
  2. css

[解決済み] ユーザーエージェントのスタイルシートが私のCSSを上書きしないようにする方法

2022-01-29 21:15:14

質問

dom要素にcursor: pointerを設定しようとしていますが、入力がそれを受けていません（チェックボックスにカーソルを置いてもポインターカーソルが表示されません）。クロームでは、"ユーザーエージェントスタイルシート"が私のCSSを上書きしていることがわかります。どうしたのでしょうか？ 

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

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

こんな質問を見たことがあります。 なぜユーザーエージェントのスタイルシートは私のスタイルを上書きするのですか？ しかし、私の問題は doctype ではないようで、以下のようになります。 推奨されるDoctype .

使用方法 !important はここでは受け入れられませんし、input ノードに直接スタイルを設定することもできません。変なブラウザの useragent スタイルを心配する必要はありません。どうなっているのでしょうか？

私の質問は、なぜユーザーエージェントのスタイルシートがCSSを上書きするのか、そしてどのようにすれば その を停止します。私の質問は ではなく この挙動を回避する方法を教えてください。私が間違っていなければ、CSSの正しい動作は、カーソルのスタイルが子ノードに継承されるべきであるということです。

これはcssに期待される動作なのでしょうか？

解決方法は？

ここで問題になっているのは、実際には input のスタイルを作成者のスタイルシートに追加します ( 仕様 というスタイルになり、そのため は ユーザーエージェントのスタイルシートで定義されたものが使用されます。

(該当する)ユーザーエージェントルール(クローム上)は。 

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

いくつかの方法で望みを実現することができます。

  1. 入力を直接選択する css クラスを作成する。
    • 他のCSSクラスを使って、または
    • 既に定義されているクラス内の入力を選択する。
    • その他
  2. すべての入力に対してカーソルスタイルの継承動作を明示的に設定する

(1)の場合。 

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

(2)の場合。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します