Pseudo-element styles applied on parent when using CSS variables

Duplicate Issue #13657721 • See Issue #11495448

Details

Author
Ana T.
Created
Sep 9, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #11495448
Found in build #
15.15063
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

Case 1

  1. Consider we have a checkbox followed by a label:
<input type='checkbox' id='check'/>
<label for='check'>check</label>
  1. We hide the actual input element (input { display: none })

  2. We set a color rule on the label and a few basic styles on its pseudo-element:

$c: #333;
$check-d: 1.25em;

label {
    color: var(--c, $c);
    
    &amp;:before {
        display: inline-block;
        width: $check-d; height: $check-d;
        box-shadow: 0 0 0 2px var(--c, $c);
        color: var(--c, transparent);
        content: '✓'
    }
}

Styles from the pseudo-element using the same variable --c that we’re also using as the value for the color property on the parent are applied not just on the pseudo-element, but also on the parent. This should not happen (and it doesn’t in Chrome and Firefox).

Also, changing the --c variable when the radio input is checked doesn’t change the styles depending on it on the pseudo-element (where it should), though it does on the parent (where it shouldn’t):

input:checked + label { --c: #e83 }

Recording of what happens in Edge (above) vs. what happens in Chrome (below):

recording

Live test: https://codepen.io/thebabydino/pen/jLgBVM?editors=1100

Case 2

  1. Consider we have 2 radio buttons, each followed by a label:
<input type='radio' name='o' id='o1' checked/>
<label for='o1'>option 1</label>
<input type='radio' name='o' id='o2'/>
<label for='o2'>option 2</label>
  1. We also hide the actual input elements.

  2. Give the labels and their :before pseudo-elements a few styles similar to the previous case:

$check-d: 1.25em;

label {
    color: var(--c, #333);
    
    &amp;:before {
        display: inline-block;
        padding: .25em;
        width: $check-d; height: $check-d;
        box-shadow: 0 0 0 2px currentcolor;
        background: var(--c, transparent) content-box;
        content: ''
    }
}

The pseudo-element background (depending on the CSS variable --c) gets applied on the parent, but changing the variable --c when the input gets checked, doesn’t change the pseudo-element background:

input:checked + label { --c: #e83 }

Screenshot of what happens in Edge (above) vs. what happens in Edge (below):

screenshot

Live test: https://codepen.io/thebabydino/pen/wqVJYz?editors=1100

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Status to “Duplicate”

  • Fixed in recent builds.

  • This bug has marked as duplicate. Please follow the parent issue to get new updates.

You need to sign in to your Microsoft account to add a comment.

Sign in