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

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;
  }

方法在这里啦，自己试试改改颜色吧！

本文地址：https://blog.csdn.net/qq_43690438/article/details/109239600