Question

我正在尝试在类型为range的<input>的拇指内创建一条线。

我已经设法使用::-webkit-slider-thumb pseduo-element选择器修改了拇指的一些样式，如下所示，但我需要一条以滑块拇指为中心的垂直线。有没有办法创建这样一条线？

input[type="range"]{
    -webkit-appearance:none !important;
    width: 344px;
    height: 18px;
    /*background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 75%,#f6f6f6 75%,#f6f6f6 100%);*/
    /*-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));*/
    border-radius: 18px;
    margin: auto;
    transition: all 0.3s ease;
    background: rgb(190,220,0);
}

input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none !important;
    /*background-color: blue;*/
    border: 1px solid #c0c0c0;
    width: 34px;
    height: 34px;
    border-radius: 18px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%, );
    -webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));
    z-index: 1;
    /*background: white url(../icons/gc4_icon_cssbutton-v.svg) no-repeat;*/
}

<input type="range" id="test" />

Answer 1

在某些旧版本的Chrome 中（但在大多数浏览器中都没有），您可以使用::after或::before伪元素执行此操作：

input[type="range"]::-webkit-slider-thumb{
    position:relative;
    display:block;
}
input[type="range"]::-webkit-slider-thumb::after{
    content:'';
    position:absolute;
    top:0;
    height:100%;
    left:50%;
    width:1px;
    background:#000;
}

DEMO

但是，从Chrome 49开始，这no longer works;允许在CSS选择器中链接伪元素（如foo::-webkit-slider-thumb::after）违反了CSS规范，Chrome已将其行为更改为符合规范。这也从不在Firefox，Internet Explorer或Edge中工作。

范围输入的拇指垂直线

1 个答案: