Question

当我选中输入复选框时，我想更改：after文本的颜色。有什么办法吗？

<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>

这是标签和复选框的CSS代码，我需要更改标签的颜色：选择单选框后。

标签

{

  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;

}

标签：之前 {

    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;

}

标签：之后 {

    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;

}

输入：选中〜标签 {

  color: #fff !important;

}

输入：选中〜标签：之前 {

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

    opacity: 1;

}

输入：选中〜标签：之后 {

    background-color: #54E0C7 !important;

    border-color: #54E0C7 !important;

}

Answer 1

如果您将::after设为label的兄弟姐妹，则只能对标签的checkbox伪元素进行样式设置，以允许使用< strong>兄弟选择器 ~：

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>

我想更改标签：选中输入复选框后的颜色之后

1 个答案: