Chrome中Input Range滑块CSS失效？跨浏览器适配代码迁移求助

Hey there, I’ve run into this exact issue before—Codepen and JSFiddle handle preprocessor code differently by default, which is almost certainly why your input range styles aren’t working in JSFiddle. Let’s break down the fixes step by step:

1. Enable Sass/SCSS Compilation in JSFiddle #

Your CSS code uses Sass-specific features: variables like $thumb-width, mixins like @include size(), and custom mixins like makelongshadow(). Codepen automatically detects and compiles Sass by default, but JSFiddle sticks to plain CSS unless you tell it otherwise.

How to fix: #

• In JSFiddle’s CSS panel, look for the dropdown menu that says "CSS" (usually in the top-right corner of the panel).
• Switch it to "Sass" (or "SCSS" if your syntax uses curly braces).
• Re-run your fiddle—this will compile the Sass code into valid CSS that the browser can understand.

2. Include Missing Custom Mixins #

Your code references makelongshadow(), which is a custom Sass mixin that’s probably defined in the original Codepen but not copied over to JSFiddle. Without this mixin, the Sass compiler will throw an error, and none of your styles will render.

Add the mixin definition: #

Paste this at the top of your CSS/Sass panel in JSFiddle (adjust the shadow logic to match the original Codepen if needed):

@mixin makelongshadow($color, $length) {
  box-shadow: 
    $length $length 0 $color,
    $length * 2 $length * 2 0 darken($color, 5%),
    $length * 3 $length * 3 0 darken($color, 10%);
}

Also, make sure you have the size() mixin defined if it’s custom (or use the built-in one if you’re using a framework like Bourbon):

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

3. Complete Cross-Browser Fallbacks #

While Codepen might handle some prefixes or defaults, it’s good practice to ensure your input range styles cover all major browsers. Here’s the full cross-browser version of your slider thumb code, including track styles to fix alignment issues:

// Define your variables first
$thumb-width: 24px;
$thumb-height: 24px;
$thumb-background: #ffffff;
$thumb-radius: 50%;
$background-slider: #e0e0e0;
$shadow-size: 12px;

// Base input reset
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}

// WebKit (Chrome, Safari, Edge)
input[type="range"]::-webkit-slider-thumb {
  @include size($thumb-width, $thumb-height);
  -webkit-appearance: none;
  appearance: none;
  background: $thumb-background;
  border-radius: $thumb-radius;
  box-shadow: makelongshadow($background-slider, $shadow-size);
  // Adjust position to center over track
  margin-top: calc((#{$thumb-height} / 2) - 4px);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: $background-slider;
  border-radius: 4px;
}

// Firefox
input[type="range"]::-moz-range-thumb {
  @include size($thumb-width, $thumb-height);
  background: $thumb-background;
  border-radius: $thumb-radius;
  box-shadow: makelongshadow($background-slider, $shadow-size);
  border: none;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: $background-slider;
  border-radius: 4px;
}

// IE/Old Edge
input[type="range"]::-ms-thumb {
  @include size($thumb-width, $thumb-height);
  background: $thumb-background;
  border-radius: $thumb-radius;
  box-shadow: makelongshadow($background-slider, $shadow-size);
  border: none;
  cursor: pointer;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: 8px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: $background-slider;
  border-radius: 4px;
}

Final Check #

After enabling Sass compilation and adding missing mixins, re-run your JSFiddle—your slider styles should match what you see in Codepen. If there’s still an issue, double-check that all variables are defined and that there are no typos in the mixin names.

内容的提问来源于stack exchange，提问作者Mr world wide