elementUI步骤条：CSS改变步骤条状态样式，进度条跟随到当前步骤，而不是当前步骤完成了才显示颜色。

本文链接：https://blog.csdn.net/ljtjianting/article/details/117926983

elementUI 步骤条：https://element.eleme.cn/#/zh-CN/component/steps
原element步骤条：
在这里插入图片描述

状态改变进度条显示：
elementUI步骤条原本的进度条显示是步骤2完成了，1和2之间的进度条才显示。
本CSS改成：走到步骤2，1和2之间的进度条就显示。

改造后效果：
在这里插入图片描述
代码：elementUI步骤条组件的代码，主要是CSS。

<template>
  <div class="about">
    <h1>CSS改造elementUI 步骤条样式</h1>
    <div class="theSteps">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>

      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>

<style scoped>
.theSteps {
  width: 1000px;
}
/* 进行中状态：圈线 */
.theSteps >>> .el-step__head.is-process {
  color: #efa73b;
  border-color: #efa73b;
}
/* 进行中状态：圈内 */
.theSteps >>> .el-step__head.is-process > .el-step__icon {
  background: #efa73b;
  color: #fff;
}
/* 进行中状态：title（文字） */
.theSteps >>> .el-step__title.is-process {
  color: #efa73b;
}


/* 完成状态：圈线 */
.theSteps >>> .el-step__head.is-success {
  color: #efa73b;
  border-color: #efa73b;
}
/* 完成状态：title（文字） */
.theSteps >>> .el-step__title.is-success {
  color: #efa73b;
}
/* 完成状态：line
 * 描述：第一步完成，第二步进行时，之间的进度条有颜色
 */
.theSteps
  >>> .el-step__head.is-success
  > .el-step__line
  > .el-step__line-inner {
  width: 100% !important;
  border-width: 1px !important;
}
</style>