使用elementUI样式不改变 el-input样式不改变

最新推荐文章于 2024-06-28 14:59:29 发布

原创最新推荐文章于 2024-06-28 14:59:29 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue

elementUI 同时被 2 个专栏收录

1 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文分享了在使用ElementUI框架时，如何通过修改CSS代码实现界面样式的个性化定制，特别是针对input组件的边框高度调整，介绍了直接修改及使用强权样式的方法。

使用elementUI样式不改变

最近在公司做项目使用elementUI发现样式不可随意的按照自己的需求改变，看了网上的做法也是不行
后来请教了公司同事，说是要用强权样式具体解决问题如下

例如这个input边框他的高度不可变解决方法就是右键检查属相找到对应样式类更能该其css代码
更改如下

在这里插入图片描述

得到想要的样式后赋值css代码

```css
	<style lang="css">
.el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 140px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
</style>