如何在运行时为输入框的伪类动态设置样式（以::first-line为例）

嘿，这个问题其实用CSS自定义属性（也就是常说的CSS变量）就能完美解决，刚好能满足你运行时动态修改伪类样式的需求，我给你拆解下具体怎么做：

方案一：使用CSS变量（优先推荐） #

这是最灵活也最易维护的方式——毕竟伪类本身没法直接用JavaScript操作，但它可以引用CSS变量，我们只需要动态修改变量的值就能间接控制伪类样式：

1. 先在CSS里定义变量，让input::first-line引用这个变量：

/* 可以给变量设个默认值（比如这里的red），防止变量未定义时样式失效 */
input::first-line {
  background-color: var(--first-line-bg, red);
}

2. 在JavaScript里，根据运行时拿到的颜色值动态更新这个CSS变量：

• 如果要让所有输入框都生效：

// 假设colorFromRuntime是你从运行时获取的实际颜色，比如用户选择的色值、接口返回的颜色
const colorFromRuntime = "blue";
// 给根元素设置变量，所有引用该变量的元素都会同步生效
document.documentElement.style.setProperty('--first-line-bg', colorFromRuntime);

• 如果只想针对某个特定的输入框生效：

const targetInput = document.getElementById('your-input-id');
const colorFromRuntime = "#ff00ff"; // 替换成你实际的运行时颜色
targetInput.style.setProperty('--first-line-bg', colorFromRuntime);

这种方式的好处是，后续不管改多少次颜色，只需要更新变量值就行，不用折腾样式标签，非常省心。

方案二：动态创建样式标签 #

如果因为某些限制没法用CSS变量，也可以通过动态创建<style>标签来覆盖原有样式：

const dynamicColor = "green"; // 运行时的目标颜色值
// 先移除可能存在的旧动态样式，避免head里堆积冗余代码
const oldStyle = document.getElementById('dynamic-first-line-style');
if (oldStyle) oldStyle.remove();

// 创建新的样式标签并插入到页面
const newStyle = document.createElement('style');
newStyle.id = 'dynamic-first-line-style';
newStyle.textContent = `input::first-line { background-color: ${dynamicColor} !important; }`;
document.head.appendChild(newStyle);

不过这个方案需要手动管理旧样式标签，不然多次修改后会在页面里留下一堆冗余代码，所以只推荐在CSS变量用不了的场景下考虑。

备注：内容来源于stack exchange，提问作者ksardas2008