样式范围输入错误 [英] Trouble styling range input thumb

问题描述

我正在尝试在html范围输入中执行以下基本样式:

I'm trying to do some basic styling in an html range input with the follow:

HTML

<input type="range" min="0" value="50" max="100" step="1" />

CSS

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance : none;
  background : red;
  height : 20px;
  width : 20px;
}

我还制作了一个 Codepen .

您会注意到，如果注释掉 background ， height 和 width 样式，则拇指确实会消失.所以有些事情在起作用.但是使用样式后，我希望它是一个 20px X 20px 红色正方形.但是，a，我只是看到了默认的拇指样式.

You'll notice that if you comment out the background, height and width styles the thumb does dissapear. So something is working. But with the styles applied I'd expect it to be a 20px X 20px red square. But alas, I just see the default thumb styling.

推荐答案

如果您可以编辑曲目，但不能编辑拇指，请确保您具有-webkit-appearance:none;在这两个地方覆盖默认行为.

If you are able to edit the track, but NOT the thumb, then be sure that you have -webkit-appearance: none; in these two places to override default behavior.

input[type=range] {
    -webkit-appearance: none; <------------------------------------ REQUIRED
}

input[type=range]::-webkit-slider-runnable-track {
    background: /* ...change color with background property... */;
    /* ...my custom edits...*/
}

input[type=range]:hover::-webkit-slider-runnable-track {
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; <------------------------------------ REQUIRED
    height: /* ..manually set height greater than 0... */ <-------- REQUIRED
    width: /* ..manually set width greater than 0... */ <---------- REQUIRED
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

input[type=range]:hover::-webkit-slider-thumb {
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

(请注意，这在Chrome中有效，但是您可以用逗号分隔其他属性，例如 input [type = range] ::-moz-range-thumb 和 input [type = range]::-ms-thumb (用于说明其他浏览器)

(Note that this works in Chrome, but you can comma separate other properties like input[type=range]::-moz-range-thumb and input[type=range]::-ms-thumb as needed to account for other browsers)

这篇关于样式范围输入错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！