typeScript gitee html powershell ipad woocommerce vcpkg notifications ldap Select2 后台管理模板下载 jq获取第一个子元素 jquery清除子元素 float占几个字节 js获取数组第一个元素 short几个字节 爬虫数据清洗 svn安装后右键不显示 python测试 python创建文件 java基本类型 javaforeach java实用教程 获取当前时间java 变量的类型 java读取文件 内存整理软件 comsol软件下载 快捷精灵 野德天赋 msn格式 微信砍价软件 一键换肤大师 骰子gif foobar2000插件 启用宏在哪里设置 日志软件 su镜像 qq浏览器兼容模式 cad特性不显示
当前位置: 首页 > 学习教程  > 

改变element-ui的input组件的(以边框为例)样式

2020/10/16 18:01:28 文章标签: input边框颜色

在vue项目中,不可避免的会用到element-ui这个组件库,也往往总需要改变一些组件的样式去和我们的项目相适应美观,很多组件都通过给一个class名再改变就可以了,!!!但是最近碰到需要改变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类名起到你想要改变的那个样式,我们可以先在“查看器中”先改变,看是否起作用,然后再在我们的样式中添加;那么其实其它的元素想要改变样式也是这么一个理。


本文链接: http://www.dtmao.cc/news_show_300285.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?