Css 在safari中设置集中输入的样式
我试图将自定义样式应用于输入[type=range],但在Safari中应用这些样式时遇到问题。Chrome、FF和IE工作正常(尽管下面的代码段中没有列出FF和IE)。pe-color()是调用存储的变量颜色的外部scss函数Css 在safari中设置集中输入的样式,css,safari,sass,Css,Safari,Sass,我试图将自定义样式应用于输入[type=range],但在Safari中应用这些样式时遇到问题。Chrome、FF和IE工作正常(尽管下面的代码段中没有列出FF和IE)。pe-color()是调用存储的变量颜色的外部scss函数 input[type=range] { -webkit-appearance: none; -moz-appearance: none; border: none; width: 12%; outline: none; background: n
input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
width: 12%;
outline: none;
background: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: $slider-track-height;
background: pe-color(hyperdrive);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
border: 1px solid pe-color(hairline-gray);
height: $slider-thumb-diameter;
width: $slider-thumb-diameter;
border-radius: 50%;
background: pe-color(white);
margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-thumb {
border: 1px solid pe-color(basic-blue);
box-shadow: 0px 0px 5px pe-color(basic-blue);
}
input[type=range]::-moz-focus-outer {
border: 0;
}
input[type=range]::-moz-range-track {
height: $slider-track-height;
background: pe-color(hyperdrive);
border: none;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
border: 1px solid pe-color(hairline-gray);
height: $slider-thumb-diameter;
width: $slider-thumb-diameter;
border-radius: 50%;
background: pe-color(white);
}
input[type=range]:focus::-moz-range-thumb {
border: 1px solid pe-color(basic-blue);
box-shadow: 0px 0px 5px pe-color(basic-blue);
}
input[type=range]::-ms-track {
height: $slider-track-height;
border-color: transparent;
border-width: 11px 0;
background: transparent;
color: transparent;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
border: 1px solid pe-color(hairline-gray);
height: $slider-thumb-diameter;
width: $slider-thumb-diameter;
border-radius: 50%;
background: pe-color(white);
}
input[type=range]::-ms-fill-lower {
background: pe-color(hyperdrive);
}
input[type=range]::-ms-fill-upper {
background: pe-color(hyperdrive);
}
input[type=range]:focus::-ms-thumb {
border: 1px solid pe-color(basic-blue);
box-shadow: 0px 0px 5px pe-color(basic-blue);
}
通过各种各样的谷歌搜索,我看到了一些关于“大纲”样式的东西,但我没有成功地使用它们。希望了解是否存在针对此元素的伪类样式。您要查找的所有内容都在这里 您没有看到任何更改的原因是,您可能没有覆盖默认浏览器样式,也没有删除滑块的所有轮廓和图像 看看这个代码笔,尽情玩玩吧
我希望这有帮助 对不起,我应该把整个文件都给你看。我已更新以反映这一点。不过,这对Safari不起作用。我确实遇到了一个8年前针对这个问题打开的bug报告,到3年前webkit还没有解决
input[type=range] {
-webkit-appearance: none; /* Hides browser default slider */
width: 100%;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-thumb {
/* changes slider on click and drag */
border: 1px solid red;
box-shadow: 0px 0px 5px red;
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000;
height: 26px;
width: 26px;
border-radius: 3px;
background: #fff;
cursor: pointer;
margin-top: -6px;
box-shadow: 1px 1px 1px #000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 16px;
cursor: pointer;
box-shadow: 1px 1px 5px black;
background: gray;
border-radius: 1.3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: blue;
border: 0.2px solid red;
}