vue修改 el-input 输入框默认背景色

最新推荐文章于 2024-09-27 13:11:06 发布

God__is__a__girl

最新推荐文章于 2024-09-27 13:11:06 发布

阅读量8k

点赞数 5

分类专栏： springboot 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/God__is__a__girl/article/details/126768918

版权

springboot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中针对`el-input`组件，当其`disabled`属性为true时，自定义更清晰的背景色。通过使用SCSS和深度选择器，实现了禁用状态下输入框的样式覆盖，将背景色改为白色，提高了视觉效果。

摘要由CSDN通过智能技术生成

vue修改 el-input 输入框默认背景色

实际项目需要修改默认的 输入框背景色 ，因为原本的默认框背景色设置属性 :disabled=true 之后显示不是很清晰，所以需要配置相应的规则

原本的不能修改的输入样式，显示的不是很清晰

原本的不能修改的图片样式

加上样式之后的效果

<style lang="scss" scoped>
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
}
</style>

修改之后的输入样式

在这里插入图片描述

以下内容可以忽略

发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。【创作规范】