3

I found a snippet of SCSS that I'm trying to use.

It contains CSS vendor prefixes that I'm unfamiliar with:

  • ::-webkit-slider-runnable-track
  • ::-webkit-slider-thumb
  • ::-moz-range-track
  • ::-ms-fill-lower
  • etc

I'd love to use Chrome or some other browser's "developer tools" / Inspect to be able to play around with colors and dimensions, but I can't find where these particular CSS rules are.

All I can find is my input element: <input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">

Currently, I'm editing SCSS in Netbeans, and it compiles to CSS on each save, and then I refresh my browser.

It's time-consuming, and I'd also really like to see where those rules take affect when I highlight an element in the inspector.

I appreciate any suggestions.

P.S. I figured there would be a way to show them, like there is for active, focus, hover, and visited rules.

Ryan
  • 22,332
  • 31
  • 176
  • 357
  • Have you found a answer to that? If so, It would be very nice if you could share it with us. I have a similar question here: https://stackoverflow.com/questions/71133738 – guilfer Feb 24 '22 at 17:11
  • 1
    @guilfer Unfortunately not. – Ryan Feb 24 '22 at 23:00

2 Answers2

3

The vendor prefixes are actually considered pseudo-selectors, and as such, create their own CSS selectors. You won't see them in the CSS states such as :hover and :active, but rather as independent CSS rules:

input[type='range']::-webkit-slider-runnable-track
input[type='range']::-webkit-slider-runnable-thumb
input[type='range']::-moz-range-track
input[type='range']::-ms-fill-lower

This is illustrated in the example below, which has different displays on the different browsers:

input[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: #AAA;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: steelblue;
  border-radius: 50%;
  border: 2px solid white;
}
<div class="container">
  <input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
</div>

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • 2
    I appreciate your answer and gave you a vote, but this is blowing my mind: when I click "Run code snippet" on your answer (in Chrome) and then right-click and "Inspect" on the input range, I immediately see in the "Styles" tab of the developer tools exactly what I was hoping to see. But on my *own* site (i.e. my own similar implementation), when I do the same Inspect, I see none of those pseudo selectors (even though their styles are successfully working). Bizarre. – Ryan Jul 16 '17 at 23:17
  • Its happening to mee too. Cant view pseudo selectors when I inspect my app, however, I can see this pseudo selector in this answer... – Zalo Oct 16 '20 at 20:54
  • I think I got his trick! He not only added the pseudo selectors, but also the input[type='range] selector (without pseudo selector) itself for this style rule, and this is visible in the dev tools: **input[type='range']**, input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { } – Benno Aug 23 '21 at 19:58
0

I finally could find an option on Chrome Dev Tools to show the user-agend pseudo-elements.

Basically you have to go to "Preferences" and scroll to the "Elements" section, where there is a option for that.

Webkit Pseudo Elements Documentation

guilfer
  • 164
  • 1
  • 12