el-input 选中颜色

### 修改 El-input 组件选中文本颜色

为了修改 `el-input` 组件中选中的文本颜色，在 CSS 中并没有直接针对选中文本颜色的选择器。不过可以通过自定义样式来间接实现这一效果。具体来说，可以覆盖浏览器默认的选中样式。

对于现代浏览器而言，`:selection`伪类可用于定制用户在页面上选定内容时的外观。然而需要注意的是，这会作用于整个应用内的所有可选中文本，除非更精确地限定范围到特定组件或元素内[^1]。

#### 自定义全局选中样式

/* 定义全局选中样式的背景色和前景色(即文字颜色) */
::selection {
    background-color: #FFA07A;
    color: white;
}

/* 针对 WebKit 浏览器如 Chrome 和 Safari 的特别处理 */
::-webkit-selection {
    background-color: #FFA07A;
    color: white;
}

如果希望仅影响某个具体的 `el-input` 实例，则需为其添加唯一标识符并据此编写更具针对性的选择器：

#### 局部化选中样式至单个 input 输入框
假设给目标输入框附加了一个名为 `.custom-select-style` 的额外类名：

<el-input v-model="value" class="custom-select-style"></el-input>

那么就可以这样写CSS规则：

.custom-select-style ::selection {
    background-color: yellow;
    color: red;
}

.custom-select-style ::-moz-selection { /* Firefox */
    background-color: yellow;
    color: red;
}

通过上述方法可以在不改变原有逻辑的情况下调整选中状态下的视觉表现形式。值得注意的是，由于不同浏览器可能有不同的渲染行为，因此建议测试多种环境以确保兼容性良好[^2]。