hello i am doing a simple floating placeholder on input. but i dont want to set the placeholder a background, since i have different input backgrounds and different background styles. is there a way to hide what is under the floating label to make it hide the line of the input?

jsx

  return (
          <input
            ref={inputRef}
            className={classes.inputStyle}
            value={startDate ? startDate.toDateString() : ""}
            readOnly={!startDate}
            required
          />
          <label>{Label}</label>

css

.inputwrap input {
  @include InputField(291px, 55px, 10px);
  @media #{$mobile} {
    width: 150px;
    height: 45px;
    font-size: 12px;
  }
  @media #{$minimobile} {
    width: 120px;
    height: 35px;
    font-size: 10px;
  }
}

.inputwrap label {
  position: absolute;
  color: $white;
  font-size: 16px;
  pointer-events: none;
  left: 15px;
  top: 20px;
  transition: 300ms ease all;
  z-index: 2;
  font-family: 400;
  @media #{$mobile} {
    font-size: 14px;
    top: 15px;
  }
  @media #{$minimobile} {
    top: 15px;
    font-size: 10px;
  }
}

.inputwrap input:focus {
  outline: none;
}

.inputwrap input:focus ~ label,
.inputwrap input:valid ~ label {
  top: -10px;
  font-size: 10px;
  color: $white;
  padding: 5px;
  background: #232435;
  @media #{$mobile} {
    font-size: 10px;
  }
}