CODEWITHSUNDEEP
cssgoogle-chrome-devtools
vikramvi
vikramvi

Reputation: 3635

Chrome ( 103 ) dev tool doesn't show "progress::-webkit-progress-value"

Chrome ( 103 ) dev tool doesn't show below values under Styles tab.

I could see this value in FF ( 102 ) under dev tool middle section at top.

Is this bug with Chrome or they have changed location somewhere else ?

progress::-moz-progress-bar {
  border-radius: 12px;
  background: radial-gradient(6px at 96%, white, white 4px, transparent),
    linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}

progress::-webkit-progress-bar {
  background: transparent;
}
progress::-webkit-progress-value {
  border-radius: 12px;
  background: radial-gradient(6px at 98%, white, white 4px, transparent),
    linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}

Upvotes: 1

Views: 302

Answers (1)

Pankaj Parashar
Pankaj Parashar

Reputation: 10212

  1. Make sure you have enabled "Show user agent Shadow DOM" in the Settings > Preferences > Elements enter image description here

  2. You need to have appearance: none on the progress element for the pseudo elements to take effect. Then you can inspect the shadow DOM and see the corresponding values in the Styles pane.

enter image description here

Upvotes: 3

Related Questions