Hi everyone,

I managed to fix the CSS Grid Layout for my kinda complicated form(“survey”) an all browsers but i am encountering some heavy issues with check-boxes section and price range slider on Mozilla and IE.

Although google chrome works as its intended! (God how much i start to hate mozilla for his relationship with the pseudo-elements when we want to have our cool custom checkboxes or range sliders).

I attach a screenshot from google chrome and one from Mozilla to see the difference.

r/webdev - Mozilla issues with Pseudo- Elements like custom checkboxes!

Mozilla version 🙁

r/webdev - Mozilla issues with Pseudo- Elements like custom checkboxes!

Google chrome as intended!

I attach my css code for slider and checkboxes

/* Price Slider .input-requirements */
.price-slider {
display: inline-block;
width: 300px;
margin: auto;
text-align: center;
position: relative;

height: 6em;

  }
.price-slider svg,
.price-slider input[type=range] {
position: absolute;
left: 0;
bottom: 0;
  }
input[type=number] {
border: 1px solid #ddd;
text-align: center;
font-size: 1.6em;
-moz-appearance: textfield;
  }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
  }
input[type=number]:invalid,
input[type=number]:out-of-range {
outline: none;
border-bottom: 2px solid #e60023;

  }
input[type=range] {
-webkit-appearance: none;
width: 100%;
  }
input[type=range]:focus {
outline: none;
  }
input[type=range]:focus::-webkit-slider-runnable-track {
background: #1da1f2;
  }
input[type=range]:focus::-ms-fill-lower {
background: #1da1f2;
  }
input[type=range]:focus::-ms-fill-upper {
background: #1da1f2;
  }
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
    animate: 0.2s;
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
  }

input[type=range]::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  }

input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
    animate: 0.2s;
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
  }
input[type=range]::-moz-range-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
  }
input[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
    animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
  }

input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
  }
input[type=range]::-ms-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
  }

The code has slider thumb properties for mozilla and ms with webkit propertie so i dont understand why its bugging.

and the check-boxes code

input[type=checkbox] {
position: relative;
cursor: pointer;
-moz-appearance:initial;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
border: 2px solid #2699FB;
border-radius: 3px;
background-color: white;
-moz-appearance:initial;
}
input[type=checkbox]:hover:before {
border:2px solid cyan;
-moz-appearance:initial;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid black;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 6px;
-moz-appearance:initial;
}
.form-check-label {
position: relative;
top:5px;
left:5px;
-moz-appearance:initial;
}

Thank you in advance,

Its so frustrating that multi browser support!



Source link

Write A Comment