vue使用elment ui 自定义按钮样式/改变el-button，el-input的样式详解

最新推荐文章于 2024-09-12 22:42:37 发布

草莓丸子不加冰

最新推荐文章于 2024-09-12 22:42:37 发布

阅读量9.1k

点赞数 6

分类专栏： vue CSS 文章标签： vue css html web

本文链接：https://blog.csdn.net/qq_43690438/article/details/109239600

版权

CSS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

本文详细讲解了在Vue项目中如何使用Element UI自定义按钮样式，包括如何改变el-button的样式。通过设置HTML结构的type属性，并在CSS中避免使用scoped限制，可以实现自定义颜色等效果。

摘要由CSDN通过智能技术生成

vue使用elment ui 自定义按钮样式/改变el-button的样式

例如：
在这里插入图片描述
鼠标移入按钮：

代码如下：
HTML结构：在type属性里面写自己自定义的名字

<el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.foodname" placeholder="菜品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="bblue">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="goon" @click="getData">重置</el-button>
        <el-button type="goon" @click="addData">添加</el-button>
      </el-form-item>
    </el-form>

css部分：（注意不要在style里面写scoped，如果有，可以另起一个style标签写样式，或者在css之前加上/deep/）

 /* 重置按钮 */
  .el-button--goon {
    color: rgb(198, 139, 223);
    background-color: rgb(246, 241, 248);
    border-color: rgb(198, 139, 223);
  }

  .el-button--goon:hover {
    color: rgb(246, 241, 248);
    background-color: rgb(198, 139, 223);
    border-color: rgb(198, 139, 223);
  }

  /* 查询按钮 */
  .el-button--bblue {
    color: rgb(148, 197, 238);
    background-color: rgb(240, 248, 255);
    border-color: rgb(148, 197, 238);
  }

  .el-button--bblue:hover {
    color: rgb(240, 248, 255);
    background-color: rgb(148, 197, 238);
    border-color: rgb(148, 197, 238);
  }
/* input框更改 */
  /deep/.el-input__inner {
    caret-color: #72aed6;
    border: 1px solid #a9dfed;
    border-bottom: 1px solid #72aed6;
    border-radius: 0px;
  }

  /deep/input::-webkit-input-placeholder {
    color: #a9dfed;
    // -webkit-text-fill-color: #84c0e9;
  }