1
0
Fork 0
mirror of synced 2024-07-02 13:01:09 +12:00

Separate style overrides for range input to fix not displaying on webkit

This commit is contained in:
Andrew Kingston 2022-06-21 15:25:37 +01:00
parent cc4b2b159c
commit e9696440be

View file

@ -48,9 +48,18 @@
outline: none;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid var(--spectrum-global-color-gray-700);
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--background);
cursor: pointer;
transition: background 130ms ease-out;
margin-top: -7px;
}
input[type="range"]::-moz-range-thumb {
border: 2px solid var(--spectrum-global-color-gray-700);
height: 12px;
width: 12px;
@ -60,7 +69,13 @@
transition: background 130ms ease-out;
}
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: var(--spectrum-global-color-gray-300);
border-radius: 2px;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 2px;