fix firefox and ie

This commit is contained in:
Jonathan Rainville 2018-08-28 13:08:33 -04:00 committed by Pascal Precht
parent 54c089583c
commit 36bfc74c58
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
1 changed files with 40 additions and 43 deletions

View File

@ -1,7 +1,7 @@
.slider {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
-webkit-appearance: none;
width: 100%;
background: transparent;
}
.slider::-webkit-slider-thumb {
@ -9,9 +9,9 @@
}
.slider:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
outline: none;
}
/*
.slider::-ms-track {
width: 100%;
cursor: pointer;
@ -19,7 +19,7 @@
background: transparent;
border-color: transparent;
color: transparent;
}*/
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
@ -36,24 +36,38 @@
background-color: #4e5b60;
border: 1px solid #383739;
}
/*
.slider::-moz-range-thumb {
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
border: 1px solid #bcbcbe;
height: 20px;
width: 10px;
border-radius: 1px;
background: #d0d0d0;
cursor: pointer;
margin-top: -6px;
}
.slider:active::-moz-range-thumb {
background-color: #4e5b60;
border: 1px solid #383739;
}
.slider::-ms-thumb {
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
border: 1px solid #bcbcbe;
height: 20px;
width: 10px;
border-radius: 1px;
background: #d0d0d0;
cursor: pointer;
}*/
margin-top: -6px;
}
.slider:active::-ms-thumb {
background-color: #4e5b60;
border: 1px solid #383739;
}
.slider::-webkit-slider-runnable-track {
width: 99%;
@ -67,39 +81,22 @@
.slider:active::-webkit-slider-runnable-track {
background: #266d99;
}
/*
.slider::-moz-range-track {
width: 100%;
width: 99%;
height: 8.4px;
cursor: pointer;
background: #3071a9;
border-radius: 1.3px;
background: #236089;
border-radius: 4px;
border: 0.2px solid #010101;
}
.slider::-ms-track {
width: 100%;
width: 99%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
.slider::-ms-fill-lower {
background: #2a6495;
background: #236089;
border-radius: 4px;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
.slider:focus::-ms-fill-lower {
background: #3071a9;
}
.slider::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
.slider:focus::-ms-fill-upper {
background: #367ebd;
}
*/