改变element-ui的input组件的（以边框为例）样式
在vue项⽬中，不可避免的会⽤到element-ui这个组件库，也往往总需要改变⼀些组件的样式去和我们的项⽬相适应美观，很多组件都通过给⼀个class名再改变就可以了，但是最近碰到需要改变Input输⼊框这个组件的边框颜⾊，了n次的百度博客，都没有解决
1. 先统⼀说⼀下曾经n次到的百度博客表达的解决⽅式，总体来说就是，给你想改变样式的input⼀个class类名，然后给它我们⾃⼰想
要的样式，最好复杂点，重点的是，不能在<style scoped></style>⾥⾯写，写了也是⽆效的，要在<style></style>⾥⾯写，本⼩⽩表⽰，失败失败失败！
2. 那么如何解决的？
3. ！！解决：不需要再多写⼀个class类名，举个“不要input的border边框”的例⼦，只要加上以下代码就可以：
<style>
/* 三种⽅法选择⾃⼰喜欢的⼀个即可 */
/* .el-input--prefix .el-input__inner{
border: none;
} */
/* .el-input--small .el-input__inner {
border: none;
} */
.el-input__inner{
border: none;
}
</style>
总结⼀下： 解决这种需要改变组件库⾥的组件的样式的⽅法就是：
1.⾸先打开我们浏览器的“检查元素”或快捷键F12，
2.“查看器”到我们想要改变的组件点击，到组件本⾝给我们的样式类名，
3.将它复制下来放到我们的<style></style>⾥⾯，这⾥注意 style不能加scoped，
4.最后在此类名中书写我们想要的样式即可。
附上图⽚：
ps：如果并不确定是哪⼀个class类名起到你想要改变的那个样式，我们可以先在“查看器中”先改变，看是否起作⽤，然后再在我们的样式中添加；那么其实其它的元素想要改变样式也是这么⼀个理。input框禁止输入

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。