elementui el-input 自定义样式，透明样式

SugarFreeOixi

已于 2024-08-22 18:13:57 修改

阅读量251

点赞数 3

文章标签： elementui 前端 javascript

于 2024-08-22 18:11:07 首次发布

本文链接：https://blog.csdn.net/qq_40221737/article/details/141434484

版权

elmentui / vue 组件自定义样式需要使用申明

/deep/ .el-input__inner

这里有个技巧，在浏览器可以看对应的标签关系：

打开浏览器，按F12 (笔记本记得Fn+F12 ，Chrome浏览器)，利用开发者模式的信息光标，可以看到elementUI的样式层级。

参考的test.vue代码

<template>
  <div >
    <el-form :model="admin">
      <el-form-item>
        <el-input   size="medium"  prefix-icon="el-icon-user" style="width: 80%"   placeholder="username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="medium"  prefix-icon="el-icon-lock" style="width: 80%"  placeholder="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 80%; margin-top: 10px" type="primary" @click="login()">login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  methods: {

  },
}
</script>

<style  scoped>
/deep/ .el-input__inner {
  background: rgba(189, 56, 56, 0.6);
}
</style>

这里需要注意一下，<style>标签中要加入 scoped，不然会失效。

如果要设置成透明的：

background: rgba(189, 56, 56, 0.001);

将rgba的第四个参数变小就可以，如果是1就不透明