ElementUI Step bar: CSS changes the step bar state style so that the progress bar follows the current step instead of showing the color when the current step is complete.

Article elementUI steps: https://element.eleme.cn/#/zh-CN/component/steps

Original Element step bar:

Status change progress bar display: The elementUI step bar originally displays progress bars between steps 1 and 2 when step 2 is complete. When you go to Step 2, the progress bar between Step 1 and Step 2 is displayed.

Effect after transformation:

Code: elementUI step bar component code, only changed CSS.

<template>
  <div class="about">
    <h1>CSS retrofits the elementUI step bar style</h1>
    <div class="theSteps">
      <el-steps :active="active" finish-status="success">
        <el-step title="Step 1"></el-step>
        <el-step title="Step 2"></el-step>
        <el-step title="Step 3"></el-step>
      </el-steps>

      <el-button style="margin-top: 12px;" @click="next">The next step</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;
}
/* In progress: circle line */
.theSteps >>> .el-step__head.is-process {
  color: #efa73b;
  border-color: #efa73b;
}
/* In progress: inside the circle */
.theSteps >>> .el-step__head.is-process > .el-step__icon {
  background: #efa73b;
  color: #fff;
}
/* In progress: title (text) */
.theSteps >>> .el-step__title.is-process {
  color: #efa73b;
}


/* Complete state: circle line */
.theSteps >>> .el-step__head.is-success {
  color: #efa73b;
  border-color: #efa73b;
}
/* Completed state: title (text) */
.theSteps >>> .el-step__title.is-success {
  color: #efa73b;
}
/* Completed status: line * Description: The first step is completed, and the progress bar between the second step is colored */
.theSteps
  >>> .el-step__head.is-success
  > .el-step__line
  > .el-step__line-inner {
  width: 100% ! important;
  border-width: 1px ! important;
}
</style>
Copy the code