在vue项目中,不可避免的会用到element-ui这个组件库,也往往总需要改变一些组件的样式去和我们的项目相适应美观,很多组件都通过给一个class名再改变就可以了,!!!但是最近碰到需要改变Input输入框这个组件的边框颜色,找了n次的百度博客,都没有解决
先统一说一下曾经n次找到的百度博客表达的解决方式,总体来说就是,给你想改变样式的input一个class类名,然后给它我们自己想要的样式,最好复杂点,重点的是,不能在里面写,写了也是无效的,要在里面写,本小白表示,失败失败失败!那么如何解决的?!!解决:不需要再多写一个class类名,举个“不要input的border边框”的例子,只要加上以下代码就可以:
/* 三种方法选择自己喜欢的一个即可 */
/* .el-input--prefix .el-input__inner{
border: none;
} */
/* .el-input--small .el-input__inner {
border: none;
} */
.el-input__inner{
border: none;
}
总结一下: 解决这种需要改变组件库里的组件的样式的方法就是: 1.首先打开我们浏览器的“检查元素”或快捷键F12, 2.“查看器”找到我们想要改变的组件点击,找到组件本身给我们的样式类名, 3.将它复制下来放到我们的里面,这里注意 style不能加scoped, 4.最后在此类名中书写我们想要的样式即可。 附上图片: ![原本的呈现样子](https://img-blog.csdnimg.cn/20200709094711418.png#pic_center) ![找到要改变样式的元素](https://img-blog.csdnimg.cn/20200709095117468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzY0MDMz,size_16,color_FFFFFF,t_70#pic_center) ps:如果并不确定是哪一个class类名起到你想要改变的那个样式,我们可以先在“查看器中”先改变,看是否起作用,然后再在我们的样式中添加;那么其实其它的元素想要改变样式也是这么一个理。
|