如何使用HTML/CSS/JavaScript实现类似在线订单的进度状态栏效果

不需要用自定义样式的radio，你现在的伪元素实现方案已经是最简洁的，只要修改CSS伪元素的样式就能实现目标效果，比额外引入radio再重置默认样式要省事得多。

你只需要对现有CSS做以下几处调整即可：

1. 给已完成的步骤节点加绿色背景、白色文字
2. 如果需要当前进行中的步骤有中心实心点的效果，可以针对最后一个激活节点加特殊样式，用径向渐变就能实现
3. 调整连接线的激活逻辑，确保已完成步骤之间的连接线全为绿色

修改后的完整CSS示例：

.container {
  width: 800px;
  margin: 100px auto;
}

.progressbar {
  counter-reset: step;
  padding: 0; /* 清除ul默认内边距 */
}

.progressbar li {
  list-style-type: none;
  width: 16.6666%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  transition: all 0.3s ease;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
  transition: all 0.3s ease;
}

.progressbar li:first-child:after {
  content: none;
}

/* 已完成步骤样式 */
.progressbar li.active {
  color: #55b776;
}
.progressbar li.active:before {
  border-color: #55b776;
  background-color: #55b776;
  color: #fff;
}
/* 已完成步骤之间的连接线设为绿色 */
.progressbar li.active:after {
  background-color: #55b776;
}

/* 当前进行中步骤（最后一个active节点）的特殊样式 */
.progressbar li.active:last-child:before {
  background-color: #fff;
  color: #55b776;
  /* 用径向渐变实现中心实心绿点 */
  background-image: radial-gradient(circle, #55b776 40%, transparent 40%);
}

你不需要修改原有DOM结构，只需要根据进度给对应节点加active类即可，比用radio的方案少了很多冗余代码，维护起来也更方便。

内容的提问来源于stack exchange，提问作者bart cubrich