78 lines
1.7 KiB
CSS
78 lines
1.7 KiB
CSS
|
/* https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */
|
||
|
|
|
||
|
|
/********** Range Input Styles **********/
|
||
|
|
|
||
|
|
/* Range Reset */
|
||
|
|
input[type="range"] {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
background: transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Removes default focus */
|
||
|
|
input[type="range"]:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
|
||
|
|
|
||
|
|
/* slider track */
|
||
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
||
|
|
height: 5px;
|
||
|
|
width: 70px;
|
||
|
|
border: 1px solid #1a2445;
|
||
|
|
border-right-color: #3a506b;
|
||
|
|
border-bottom-color: #3a506b;
|
||
|
|
background-color: #2e2e27;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* slider thumb */
|
||
|
|
input[type="range"]::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none; /* Override default look */
|
||
|
|
appearance: none;
|
||
|
|
margin-top: -12px; /* Centers thumb on the track */
|
||
|
|
|
||
|
|
/* custom styles */
|
||
|
|
height: 11px;
|
||
|
|
margin-top: -4px;
|
||
|
|
width: 5px;
|
||
|
|
background: #640000;
|
||
|
|
border: 1px solid #812b25;
|
||
|
|
border-right-color: #21110f;
|
||
|
|
border-bottom-color: #21110f;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="range"]:focus::-webkit-slider-thumb {
|
||
|
|
border: 1px solid #21110f;
|
||
|
|
border-right-color: #812b25;
|
||
|
|
border-bottom-color: #812b25;
|
||
|
|
}
|
||
|
|
|
||
|
|
/******** Firefox styles ********/
|
||
|
|
|
||
|
|
/* slider track */
|
||
|
|
input[type="range"]::-moz-range-track {
|
||
|
|
background-color: #053a5f;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
height: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* slider thumb */
|
||
|
|
input[type="range"]::-moz-range-thumb {
|
||
|
|
border: none; /*Removes extra border that FF applies*/
|
||
|
|
border-radius: 0; /*Removes default border-radius that FF applies*/
|
||
|
|
|
||
|
|
/* custom styles */
|
||
|
|
background-color: #5cd5eb;
|
||
|
|
height: 2rem;
|
||
|
|
width: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="range"]:focus::-moz-range-thumb {
|
||
|
|
border: 1px solid #053a5f;
|
||
|
|
outline: 3px solid #053a5f;
|
||
|
|
outline-offset: 0.125rem;
|
||
|
|
}
|