How do I stylize the input type checkbox with the background image-CodePudding

I have this sample:

CODE HTML:

<div >
   <input type="checkbox" name="is_subscribed" title="Înscrie-te la newsletter" value="1" >
   <label for="is_subscribed" >
   <span>Înscrie-te la newsletter</span>
   </label>
</div>

CODE CSS:

input[type="checkbox"] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

input[type="checkbox"] {
  position: absolute !important;
  top: 0 !important
}

input[type="checkbox"] label{
  background: url('https://static1.carcloud.ro/static/version1639557414/frontend/Carcloud/default/ro_RO/images/icon-checkbox-a1.svg') no-repeat 0 0;
  color: #23252b;
  cursor: pointer;
  display: block !important;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 0 !important;
  padding-left: 26px;
  min-height: 16px;
  position: relative;
  vertical-align: sub
}

input[type="checkbox"] label span {
  display: inline-block
}

input[type="checkbox"]:checked label {
  background-image: url('https://static1.carcloud.ro/static/version1639557414/frontend/Carcloud/default/ro_RO/images/icon-checkbox-b1.svg')
}

I want to change the background when the input is "checked".

Unfortunately this does not happen, something does not work on my CSS code.

Can you please tell me if this can be done as I wanted to write it?

Thank you!

CodePudding user response：

your input id should be the same as attribute for in label

<input type="checkbox" id="is_subscribed" title="Înscrie-te la newsletter" value="1" >
<label for="is_subscribed" >