0

We are using has in CSS which is causing issues in FF.

We don't want to change via about:config of FF.

Is there any alternative or best practice to resolve within CSS/HTML.

So it will work in all browsers?

https://caniuse.com/css-has

Example : On basis of checkbox checked we are changing the color of DIV

.toggle {
    position: relative;
    top     : 5px;

     .toggle-wrap {
        width : 18px;
        height: 8px;

        &:has(+ input[type="checkbox"]:checked) {
            background-color: red;
        }
    }   
}
Mike
  • 13
  • 9
  • 1
    give an example of what you're trying to do and we can find alternative using javascript – Salwa A. Soliman May 31 '23 at 06:34
  • Hi @SalwaA.Soliman Example added. There are multiple places we are using. Above one just one example of that – Mike May 31 '23 at 06:41
  • "Is there any alternative or best practice to resolve within CSS/HTML. So it will work in all browsers?" — No. You need JavaScript. – Quentin May 31 '23 at 06:45
  • @Mike, you can add event listener to the checkbox. If it's checked, you can add a class to its parent container .. if not, you can remove that class (Note: class will be responsible for adding background color as you want to do in this example) – Salwa A. Soliman May 31 '23 at 06:51

0 Answers0