CODEWITHSUNDEEP
css
Developer
Developer

Reputation: 289

CSS :after pseudo element, working in Chrome, doesn't work in Edge

Below CSS is working perfect in Chrome but not in edge I tried ::after it doesn't make any difference. I also tried position: visible and hidden, but no luck.

    input[type=checkbox] {
      display: none;
    }

    input[type=checkbox]+label {
      display: inline-block;
      position: relative;
      overflow: visible;
      padding: 9px;
      top: 4px;
      border: 2px solid $border-contrast-dark;
      border-radius: 50%;
      left: 15px;
      cursor: pointer;
      z-index: 10;
    }

    input[type=checkbox]:checked+label {
      background-color: $action-success-color;
      color: $text-contrast-light;
      border: 2px solid $border-contrast-light;
    }

    // its not taking below properties
    input[type=checkbox]:checked+label:after {
      position: absolute;
      overflow: hidden;
      left: 3px;
      top: 0px;
      color: white; // its not taking this property
      content: '\2714';
      @include font-size(14px);
    }

Upvotes: 0

Views: 747

Answers (1)

Kosh
Kosh

Reputation: 18378

  1. // its not taking below properties

CSS does not support commening with // like JS does. So remove comments like this (or replace them with /* comment */ if needed)

  1. its not taking this property

That's because Edge renders your \2714 as emoji symbol (because it can).
You have to apply a trick to fix it. See the snippet below:

    input[type=checkbox] {
      display: none;
    }

    input[type=checkbox]+label {
      display: inline-block;
      position: relative;
      overflow: visible;
      padding: 9px;
      top: 4px;
      border: 2px solid $border-contrast-dark;
      border-radius: 55%;
      left: 15px;
      cursor: pointer;
      z-index: 10;
    }

    input[type=checkbox]:checked+label {
      background-color: grey;
      color: white;
      border: 2px solid black;
    }
 
    input[type=checkbox]:checked+label:after {
      position: absolute;
      overflow: hidden;
      left: 3px;
      top: 0px;
      color: white;
      font-family: "Segoe UI Symbol"; /* for Edge */
      content: '\2714\fe0e'; /* \fe0e for Safari and others */
      @include font-size(14px);
    }
<input id="i" type="checkbox">
<label for ="i">Label</label>

Upvotes: 1

Related Questions