如何用原生JS或React选中label内的::before伪元素并动态修改样式？

::before 属于CSS伪元素，不属于真实DOM节点，无法直接通过JavaScript选择修改，可通过以下方案实现动态颜色修改：

核心思路是用CSS自定义属性（变量）绑定伪元素的颜色值，通过修改父元素的CSS变量间接更新伪元素样式：

1. 调整原有自定义CSS，将固定颜色替换为CSS变量：

.radio-toggle .ui.toggle.checkbox input:checked ~ label:before,
.radio-toggle .ui.toggle.checkbox input:focus:checked ~ label:before {
    background: var(--toggle-active-color, saddlebrown) !important;
}

2. JS侧直接修改对应容器的CSS变量即可生效，无需选择伪元素：

// 可选择toggle组件的外层容器或内部label元素
const toggleWrap = document.querySelector('.radio-toggle');
// 传入自定义颜色值
toggleWrap.style.setProperty('--toggle-active-color', '#ff0000');

更符合React开发规范，无需操作原生DOM，有两种常见实现方式：

方案1：CSS变量结合内联样式（最轻量，无额外依赖） #

复用上面调整后的CSS代码，在组件中直接通过内联样式绑定CSS变量即可：

import { Radio } from 'semantic-ui-react';

function CustomToggle({ activeColor = 'saddlebrown' }) {
  return (
    <div 
      className="radio-toggle"
      style={{ '--toggle-active-color': activeColor }}
    >
      <Radio toggle />
    </div>
  )
}

方案2：CSS-in-JS封装（适合项目已使用styled-components等方案的场景） #

直接封装带动态样式的自定义Toggle组件，无需全局写CSS：

import styled from 'styled-components';
import { Radio } from 'semantic-ui-react';

const StyledToggle = styled(Radio)`
  &.ui.toggle.checkbox input:checked ~ label:before,
  &.ui.toggle.checkbox input:focus:checked ~ label:before {
    background: ${props => props.activeColor} !important;
  }
`

// 组件调用
function CustomToggle({ activeColor = 'saddlebrown' }) {
  return <StyledToggle toggle activeColor={activeColor} />
}

你之前直接给Radio组件加style不生效，是因为行内样式只会作用在Radio组件的根DOM节点上，无法影响其内部子元素的伪元素样式。

内容的提问来源于stack exchange，提问作者Zeddrix Fabian