如何在选中单选框时修改label:after元素的颜色？

问题描述 #

我希望在选中input单选框时修改label:after的颜色，请问是否有实现方法？

相关HTML代码：

<label class="form-check-label" for="premium_vendor"> 
  <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> 
</label>

当前CSS代码（需实现选中单选框时改变label:after颜色）：

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

问题原因 #

你当前用的input:checked ~ label是兄弟选择器，它只能选中和input同级且在input之后的label元素，但你的HTML结构里，input是嵌套在label内部的，这个选择器根本匹配不到目标元素，所以样式不会生效。

解决方案 #

我们可以用CSS的:has()伪类来实现“父元素选择”的逻辑（现代浏览器均支持该特性），直接选中包含已勾选input的label，再修改它的伪元素样式。

修改后的CSS代码如下：

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

/* 替换原有的兄弟选择器逻辑 */
label:has(input:checked) {
  color: #fff !important;
}
label:has(input:checked):before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}
label:has(input:checked):after {
  background-color: #54E0C7 !important;
  border-color: #54E0C7 !important;
}

补充说明 #

• 如果需要兼容非常老旧的浏览器（比如Firefox 120及以下），可以把input和label改成同级结构，再用原来的兄弟选择器，但:has()是更简洁优雅的现代方案。
• 你HTML里的:before和:after文本只是注释用的，实际可以删掉，CSS的伪元素不需要在HTML中手动添加这些内容。

内容的提问来源于stack exchange，提问作者Sandeep Singh