改变element

您所在的位置:网站首页 form表单样式案例 改变element

改变element

2023-07-25 05:32| 来源: 网络整理| 查看: 265

在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.最后在此类名中书写我们想要的样式即可。 附上图片: 原本的呈现样子找到要改变样式的元素最后呈现的样式ps:如果并不确定是哪一个class类名起到你想要改变的那个样式,我们可以先在“查看器中”先改变,看是否起作用,然后再在我们的样式中添加;那么其实其它的元素想要改变样式也是这么一个理。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3