Mysterious Border on Mozilla Firefox HTML5 Range Element

[ruffpast]

Hello everyone,
I am customizing my html5 range slider that was provided by FacetWP (for WordPress) with some CSS, but for some reason, an outline appears around it on Mozilla Firefox, but not the other browsers. Could someone please help remove this? I’ve set the outline and border to none, but I would’ve thought that this would’ve removed it. Since this forum doesn’t allow attached photos, please see the following link in Mozilla versus another browser (such as Google Chrome or Safari):

https://ruffpast.com/states/alabama/#

Here’s my CSS code (in case it’s helpful):
input[type=range] {
-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 */
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

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]{
border:0;
}

input[type=range]::-webkit-slider-runnable-track {
box-shadow: none;
background: #ffffff;
border: none;
border-radius: 3px;
height: 4px;
margin-top: 0px;
/* YOU NEED TO SPECIFY A MARGIN IN CHROME, BUT IN FIREFOX AND /
/ IE IT IS AUTOMATIC */
margin-bottom: 0px;
outline: none;
}

input[type=range]::-webkit-slider-thumb{
height: 20px;
margin-top: -9px;
background: #ff4455; /slider color/
}

input[type=range]:hover::-webkit-slider-runnable-track-progress,
input[type=range]:focus::-webkit-slider-runnable-track-progress {
background:#ff4455; /* Makes lower slider region in red also */
}

/* ALL THE SAME STUFF FOR FIREFOX */

input[type=range]::-moz-range-track {
box-shadow: none;
box-sizing: none;
background: #ffffff;
border: 0 !important;
border-radius: none;
height: 4px;
outline: none !important;
border-color: transparent;
}

input[type=range]::-moz-range-thumb {
height: 20px;
width: 20px;
background: #ff4455;
border: none !important;
}

/* ALL THE SAME STUFF FOR IE */

input[type=range]::-ms-track {
box-shadow: none;
background: #ffffff;
border: 0 !important;
height: 4px;
outline: none !important;
border-color: transparent;
}

input[type=range]::-ms-thumb{
height: 20px;
width: 20px;
background: #ff4455;
border: none !important;

Thank you!!

[Shikkediel]

Looks like it’s just a border, also present in Chrome but less noticeable because it’s right beside the slider. It overwrites all the other styling…

input[type=range] {
border: 1px solid white;
}

You can insert images by the way by writing some code inside your post:

<img src="yourpath.jpg" alt="">

[ruffpast]

Shikkediel, thank you so much for resolving my issue and responding so fast!! I really appreciate it! Did you use the inspector tool on Google Chrome to see that line of code?

Thanks!

[Shikkediel]

Glad to help, I did indeed use developer tools.

[Author]

Posts