vue2 el-input disabled怎么修改placeholder颜色

你可以通过下面的 CSS 代码来修改禁用状态下的 placeholder 颜色：

.el-input.is-disabled .el-input__placeholder{
  color: #999; /* 你想要的颜色 */
}

在这个代码中，`.el-input.is-disabled` 选择器选择了禁用状态下的输入框，`.el-input__placeholder` 选择器选择了 placeholder 文本。你可以修改 `color` 属性的值来改变 placeholder 的颜色。

相关问题

vue 的el-input框中添加%符号呢

你可以在 Vue 的 `el-input` 组件中使用 `slot` 来自定义输入框的结构。以下是一个示例：

<el-input v-model="value" placeholder="Enter">
  <template slot="append">%</template</el-input>

在这个示例中，我们使用 `v-model` 来绑定输入框的值到 Vue 实例的 `value` 属性上。然后，我们使用 `slot` 来在输入框的尾部插入一个 `%` 符号。这个 `%` 符号将会自动跟随输入框的宽度变化而变化。

如果你想要在 `%` 符号和输入框之间添加一些间距，可以使用 `slot-scope` 来访问输入框的原始 HTML 结构，然后自定义 CSS 样式。以下是一个示例：

<el-input v-model="value" placeholder="Enter value">
  <template slot="append" slot-scope="{ disabled }">
    <span class="input-symbol" :class="{ 'is-disabled': disabled }">%<span>
  </template>
</el-input>

.input-symbol {
  margin-left: 10px;
  margin-right: 10px;
}

.is-disabled {
  opacity: 0.5;
}

在这个示例中，我们使用 `slot-scope` 来访问 `el-input` 组件的 `disabled` 属性。然后，我们使用自定义的 CSS 样式来添加间距和禁用状态的样式。

el-input 文字颜色

要修改el-input组件的文字颜色，可以采用以下两种方法：

方法一：通过修改父组件中el-input组件的disabled状态下的字体颜色。可以通过添加以下样式来实现：

.el-input.is-disabled .el-input__inner {
  color: #227092;
}

这样就可以将disabled状态下的字体颜色修改为指定的颜色。

方法二：如果你想修改子组件中el-input disabled状态下的placeholder字体颜色，可以使用深度选择器来实现：

<style lang="less" scoped>
/deep/ input::-webkit-input-placeholder {
  color: #17a1e5;
  font-size: 15px;
}
</style>

通过/deep/可以穿透父组件的作用域来修改子组件中的样式。这样就可以将disabled状态下placeholder的字体颜色修改为指定的颜色。

请根据你的具体需求选择适合的方法进行修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [修改el-input disabled状态下的字体颜色,vue修改子组件中的el-inputdisabled状态下的placeholder字体颜色](https://blog.csdn.net/pleaseprintf/article/details/129443387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [修改element-ui里的input输入框里的字体颜色和背景透明](https://blog.csdn.net/weixin_55966654/article/details/119821620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]