1

I am trying to find the CSS rule, in a large number of CSS files, that is responsible for a box-shadow (or something similar) being applied to an input element when it is focussed.

My question is this. How can I see exactly which styles are changing when the element becomes focussed, versus its normal state?

I know how to set the focus state on the element, so that I can inspect absolutely all the computed styles that are being applied on both states:

enter image description here

But the problem is that there are so many styles set on the element in both states that I can't easily keep track of what has changed. It could be a box-shadow, a border, an outline... There are many rules and many possibilities.

I know I can use the right-hand sidebar to look at all the style rules that apply - but again, there are so many that it's hard to keep track of what is different.

At the moment I have three options:

  1. Writing down all the computed styles on the normal state, then all the styles on the :focus state, then doing a manual diff
  2. Writing down all the matched CSS rules for both states, and doing a manual diff
  3. Finding a way to do an actual diff!

So my question is: is (3) possible?

4

2 に答える 2

2

Styles 部分 (Computed Style の下) の下の Chrome Developer Tool には、状態をシミュレートするためのボタン (Toggle Element State) があります。さまざまな状態でアクティブなスタイルを確認したい場合に非常に便利です。

于 2013-04-15T15:01:14.783 に答える
1

私のCSSDiff拡張機能を試すことができます。最後に検査された 2 つの要素の違いを示します。あなたが達成しようとしていることは正確ではありませんでしたが、フォーカスがあるはずの同じ種類の2つの入力を調べることでそれを使用できるはずです(そうすれば、フォーカスされた要素とフォーカスされていない要素の実際の違いがわかります) .

于 2013-05-02T17:43:44.607 に答える