I have the following css file

body {
    font-family: Baskerville;
    background: #ecf0f1;
    color:  #2c3e50;
}
h1 {
    margin: 16px 0;
    padding-left: 16px;
    border-left: 5px solid #e74c3c;
    font-family: Baskerville;
    font-size: 48px;
}
h3 {
    margin: 16px 0;
    padding-left: 16px;
    color:  #cccac4;
}
.container1 {
    padding: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container1 .checkbox {
    padding: 8px 48px;
    margin: 8px;
    font-family: Baskerville;
    font-size: 25px;
}

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

label {
  position: relative;
}

label::before {
  content: "";
  background: url("check-circle.svg");
  background-position: center;
  background-size: contain;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -44px;
  top: -8px;

  transform: scale(0) rotateZ(180deg);
  transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

input[type="checkbox"]:checked   label::before {
  transform: scale(1.0) rotateZ(0deg);
}

label::after {
  content: "";
  border: 2px solid #27ae60;
  width: 24px;
  height: 24px;
  position: absolute;
  left: -42px;
  top: 1px;
  border-radius: 50%;
}

This is a simple transform and transition where i rotate the img (check-circle.svg) in those 4 curve points of cubic-bezier , whenever it is checked or unchecked after. However the transition and transformation wont work. It will simply not show. Where am i mistaken ?

CodePudding user response：

Are you sure you've placed <label>...</label> immediately after <input type="checkbox"/>? Code seems fine, although I'm not sure what is the purpose of input[type="checkbox"]{ display: none; }. Posting html would be nice too.

Also you can check if provided svg's url is correct. Try to replace it with some other svg url found on internet.

CodePudding user response：

make sure that (label) is a direct next child of (input)