I want to change the label:after color after checked the input checkbox

Question

I want to change the color of :after text when I checked the input checkbox. Is there any way to do this?

<label class="form-check-label" for="premium_vendor">
:before
<input type="radio" id="premium_vendor" name="ppom[fields][advertisement_package]" class="ppom-check-input" value="PREMIUM VENDOR" data-price="250" data-optionid="premium_vendor" data-label="PREMIUM VENDOR" data-title="Advertisement Package" data-onetime="" data-taxable="" data-without_tax="" data-data_name="advertisement_package" checked="checked"> 

<span class="ppom-label-radio">PREMIUM VENDOR ($250.00)</span>
:after
</label>

Here is CSS code of label and checkbox, I need to change the color for label:after when I selected the radio box.

label

{

  padding: 12px 30px;

  width: 100%;

  display: block;

  text-align: left;

  color: #ffffff;

  cursor: pointer;

  position: relative;

  z-index: 2;

  transition: color 200ms ease-in;

  overflow: hidden;

}

label:before {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    content: '';

    background-color: #5562eb;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%) scale3d(1, 1, 1);

    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);

    opacity: 0;

    z-index: -1;

}

label:after {

    width: 32px;

    height: 32px;

    content: '';

    border: 2px solid #D1D7DC;

    background-color: #fff;

    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");

    background-repeat: no-repeat;

    background-position: 2px 3px;

    border-radius: 50%;

    z-index: 2;

    position: absolute;

    right: 30px;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    transition: all 200ms ease-in;

}

input:checked ~ label {

  color: #fff !important;

}

input:checked ~ label:before {

    transform: translate(-50%, -50%) scale3d(56, 56, 1);

    opacity: 1;

}

input:checked ~ label:after {

    background-color: #54E0C7 !important;

    border-color: #54E0C7 !important;

}

short answer no, but if you told us what you have in the after element we can try to do this differently — Temani Afif, Feb 08 '19 at 22:08
I have this in after class: label.form-check-label:after { background-color: #fff; } — Sandeep Singh, Feb 08 '19 at 22:12
but that color is applied to what? show us a full code, we need to see the rendring to be able to adjust the code to keep the same rendring — Temani Afif, Feb 08 '19 at 22:14
You can do something like https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label — l2aelba, Feb 08 '19 at 22:16
Here is the website, https://cannabisoiltalk.com/product/advertisement-package/ I have 2 radio buttons there Premium vendor and Basic Products, I want to change the color when I checked one of them. Please let me know if you need the complete code. Thanks. — Sandeep Singh, Feb 08 '19 at 22:17
yes we still need the code within the question for future reference — Temani Afif, Feb 08 '19 at 22:18
Hi, I updated the task. Please review it and let me know if it is possible. Thanks. — Sandeep Singh, Feb 08 '19 at 22:35

score 0 · Answer 1 · answered Feb 08 '19 at 22:19

You can only style the ::after pseudo element of the label of if you make the label a sibling of the checkbox which allows to use the sibling selector ~:

input[type=radio]:checked ~ label::after {
  color: red;
  content: "checked!";
}

<input type="radio" id="premium_vendor" name="ppom[fields][advertisement_package]" class="ppom-check-input" value="PREMIUM VENDOR" data-price="250" data-optionid="premium_vendor" data-label="PREMIUM VENDOR" data-title="Advertisement Package" data-onetime="" data-taxable="" data-without_tax="" data-data_name="advertisement_package"> 

<span class="ppom-label-radio">PREMIUM VENDOR ($250.00)</span>
<label class="form-check-label" for="premium_vendor"></label>

I want to change the label:after color after checked the input checkbox

1 Answers1