如何修改Element-UI的input样式

Question

1、使用css覆盖样式，无法生效

2、代码如下：

<el-form-item>
   <el-input v-model="form.name" auto-complete="off" placeholder="手机号\邮箱\用户名" class="login-form-input"></el-input>
</el-form-item>

<style>
    .login-form-input .el-input__inner {
        border: 0 none;
        border-bottom: 1px solid #ccc;
        border-radius: 0px;
    }
</style>

3、写后css样式没有变化

Answer 1

你可看看这篇文章，可以解决你的问题 https://zhuanlan.zhihu.com/p/...

Answer 2

父组件的 scoped 样式不能穿透到子组件上。
使用 vue-loader 的写法。

有人用去掉 scoped 的方法解决，但这会污染全局样式，不可取。

使用 /deep/ 或者 >>> 解决
/deep/

.child /deep/ span {
*some prop
}

>>>

.child >>> span {
*some prop
}

参考：https://vue-loader.vuejs.org/...

Answer 3

在vue中，把style的scoped去掉就可以了。跟作用域有关

Answer 4

style标签加scoped试试

Answer 5

• 一样的代码

<el-form-item>
   <el-input v-model="form.name" auto-complete="off" placeholder="手机号\邮箱\用户名" class="login-form-input"></el-input>
</el-form-item>

<style>
    .login-form-input .el-input__inner {
        border: 0 none;
        border-bottom: 1px solid #ccc;
        border-radius: 0px;
    }
</style>

• 浏览器中渲染出来的 html

• 但是你看渲染出来的 style,编译之后不知道为什么选择器被修改了，加了个属性选择器。

所以答案是我也不知道，一个多月过去了，你知道了吗

Answer 6

重新定义一个类名，然后再写样式

Answer 7

用css选择器
<style>
[placeholder~=手机号邮箱用户名]{
color:red;
}
</style>