使用偽類創建CSS進度條/步進器

Question

我正在構建一個步進器，試圖實現這一目標：

我建立了以下內容，但是問題是顏色在欄的右側溢出。

 .onboarding-steps { display: flex; } .onboarding-steps-container { background-color: #393D66; border-top: 1px solid #AEAEAE; border-bottom: 1px solid #AEAEAE; background-position: -50% 0; } .onboarding-step.active { color: white; } .onboarding-step.active ~ .onboarding-step { background-color: #fff; } .container-fluid { max-width: 94px; margin-right: auto; margin-left: auto; } .list-reset { list-style: none; padding: 0; margin: 0; } .onboarding-step { -ms-flex-positive: 1; flex-grow: 1; padding: 1.8rem 1rem 1.8rem 1.5rem; } 

 <nav class="onboarding-steps-container"> <div class="container-fluid"> <ul class="list-reset clearfix onboarding-steps"> <li class="onboarding-step"> 1 </li> <li class="onboarding-step active"> 2 </li> <li class="onboarding-step"> 3 </li> <li class="onboarding-step"> 4 </li> </ul> </div> </nav> 

我也嘗試過使用偽選擇器來進行變體：

li.onboarding-step.active:before {
    background-color: #f9f9f9;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    position: absolute;
}

.onboarding-steps-container {
  position: relative;
}

在這種情況下，顏色會遍及整個條形。

Answer 1

這是一個例子。

 .breadcrumb { margin: 0; padding: 0; list-style: none; overflow: hidden; height: 36px; display: flex; justify-content: center; align-items: center; align-content: center; padding-right: 35px; } .breadcrumb li { text-decoration: none; padding: 10px; position: relative; cursor: pointer; flex: auto; border: 1px solid red; } .breadcrumb li span { font-size: 11px; display: inline-block; width: 16px; line-height: 16px; border-radius: 50%; background-color: white; vertical-align: middle; text-align: center; margin-left: calc(100% - 8px); } .breadcrumb li:after { content: ""; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #393D66; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li:before { content: ""; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 2px; left: 100%; z-index: 1; } li { background-color: #393D66; } li:first-child {} li.active ~ li { background-color: #f5f5f5; } li.active ~ li:after { border-left-color: #f5f5f5; } li.active ~ li:before { border-left-color: #d5d5d5; } li.active ~ li span { background-color: #c5c5c5; color: white; } 

 <div class="stepper"> <ul class="breadcrumb"> <li><span>1</span> </li> <li><span>2</span> </li> <li class="active"><span>3</span> </li> <li><span>4</span> </li> <li><span>5</span> </li> </ul> </div> 

Answer 2

我不確定您是否在尋找一個答案，該答案會在活動的<li>和第一個<li>之前和之后更改<li>元素，但是如果您需要的話，這是一種解決方案。 否則，與Pugazh的回答幾乎相同。

 html, body { background-color: #ccc; } .onboarding-steps { list-style: none; overflow: hidden; font: 18px Helvetica, Arial, Sans-Serif; } .onboarding-steps li { float: left; } .onboarding-steps li span { color: white; text-decoration: none; padding: 10px 20px 10px 45px; background: #393D66; position: relative; display: block; float: left; } .onboarding-steps li span i { display: block; padding: 0 5px; width: 5px; height: 15px; font-size: 10px; background-color: white; color: grey; border-radius: 50%; border: 1px solid grey; } .onboarding-steps li:first-child span { padding: 10px 50px 10px 65px; } .onboarding-steps li.active ~ li span { color: black; background: #ffffff; } .onboarding-steps li span:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #393D66; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .onboarding-steps li.active ~ li span:after { border-left: 30px solid #ffffff; } .onboarding-steps li span:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .onboarding-steps li.active ~ li span:before { border-left: 30px solid grey; } 

 <ul class="onboarding-steps"> <li> <span><i>1</i></span> </li> <li class="active"> <span><i>2</i></span> </li> <li> <span><i>3</i></span> </li> <li> <span><i>4</i></span> </li> </ul> 

編輯：

這是另一個例子。 我什至使這些項目可單擊，以便您可以看到背景與活動類的<li>反應。

 var elements = document.querySelectorAll(".list-item"); for (var i = 0; i < elements.length; i++) { elements[i].addEventListener("click", function() { for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } this.classList.add("active"); }); } 

 html, body { background-color: #ccc; } .onboarding-container { background: #FFFFFF; border: 2px solid black; padding: 30px; } .onboarding-steps { width: 100%; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; overflow: hidden; font: 18px Helvetica, Arial, Sans-Serif; display: flex; } .onboarding-steps li { position: relative; background: #393D66; border-top: 1px solid grey; border-bottom: 1px solid grey; padding: 10px 30px 10px 40px; flex: 1; transition: flex 300ms linear 0s, background 100ms linear 0s; } .onboarding-steps li.active { flex: 0 0 200px; transition: flex 300ms linear 0s, background 100ms linear 0s; } .onboarding-steps li:first-child { padding: 10px 30px 10px 10px; } .onboarding-steps li:last-child { margin-right: -1px; } .onboarding-steps li span { display: block; padding: 0 5px; width: 5px; height: 15px; font-size: 10px; background-color: white; color: grey; border-radius: 50%; border: 1px solid grey; } .onboarding-steps li:after { content: " "; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #393D66; position: absolute; top: 50%; margin-top: -20px; left: 100%; margin-left: -2px; z-index: 2; transition: border-left 100ms linear 0s; } .onboarding-steps li:before { content: " "; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid white; position: absolute; top: 50%; margin-top: -20px; margin-left: -1px; left: 100%; z-index: 1; transition: border-left 100ms linear 0s; } .onboarding-steps li:last-child:after { margin-left: -22px; } .onboarding-steps li:last-child:before { margin-left: -21px; border-top: 20px solid #ffffff; border-bottom: 20px solid #ffffff; } .onboarding-steps li.active ~ li { background: #ffffff; } .onboarding-steps li.active ~ li:after { border-left: 20px solid #ffffff; transition: border-left 100ms linear 0s; } .onboarding-steps li.active ~ li:before { border-left: 20px solid grey; transition: border-left 100ms linear 0s; } 

 <div class="onboarding-container"> <ul class="onboarding-steps"> <li class="list-item active"> <span>1</span> </li> <li class="list-item"> <span>2</span> </li> <li class="list-item"> <span>3</span> </li> <li class="list-item"> <span>4</span> </li> </ul> </div> 

編輯2：

根據您的評論，我再舉一個例子，這可能是僅使用CSS就能獲得的最接近的例子。 希望這會對您有所幫助。 請以全屏模式打開它，以查看它是否正常運行。

 var elements = document.querySelectorAll(".list-item"); for (var i = 0; i < elements.length; i++) { elements[i].addEventListener("click", function() { for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } this.classList.add("active"); }); } 

 html, body { background-color: #ccc; } * { box-sizing: border-box; } .onboarding-container { width: 100%; background: #FFFFFF; border: 2px solid black; padding: 20px 0px; } .onboarding-container-inner { position: relative; width: 100%; border-top: 1px solid grey; border-bottom: 1px solid grey; background: transparent; z-index: 1; overflow: hidden; } .onboarding-steps:before { content: ""; display: inline-block; width: 40%; background: #393D66; left: 0; top: 0; height: 100%; position: absolute; } .onboarding-steps:after { content: ""; display: inline-block; width: 40%; background: #ffffff; right: 0; top: 0; height: 100%; position: absolute; z-index: -1; } .onboarding-steps { width: 100%; max-width: 600px; margin: 0 auto; padding: 0; list-style: none; font: 18px Helvetica, Arial, Sans-Serif; display: flex; } .onboarding-steps li { position: relative; background: #393D66; padding: 10px 30px 10px 40px; flex: 1; transition: flex 300ms linear 0s, background 100ms linear 0s; } .onboarding-steps li.active { //flex: 0 0 200px; transition: flex 300ms linear 0s, background 100ms linear 0s; } .onboarding-steps li:first-child { padding: 10px 30px 10px 10px; } .onboarding-steps li:last-child { margin-right: -1px; } .onboarding-steps li span { display: block; padding: 0 4px; width: 15px; height: 15px; font-size: 10px; background-color: white; color: grey; border-radius: 50%; border: 1px solid grey; } .onboarding-steps li:after { content: " "; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #393D66; position: absolute; top: 50%; margin-top: -20px; left: 100%; margin-left: -2px; z-index: 2; transition: border-left 100ms linear 0s; } .onboarding-steps li:before { content: " "; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid white; position: absolute; top: 50%; margin-top: -20px; margin-left: -1px; left: 100%; z-index: 1; transition: border-left 100ms linear 0s; } .onboarding-steps li:last-child:after { margin-left: -22px; } .onboarding-steps li:last-child:before { margin-left: -21px; border-top: 20px solid #ffffff; border-bottom: 20px solid #ffffff; } .onboarding-steps li.active:last-child:before { border-top: 20px solid #393D66; border-bottom: 20px solid #393D66; } .onboarding-steps li.active ~ li { background: #ffffff; } .onboarding-steps li.active ~ li:after { border-left: 20px solid #ffffff; transition: border-left 100ms linear 0s; } .onboarding-steps li.active ~ li:before { border-left: 20px solid grey; transition: border-left 100ms linear 0s; } .onboarding-steps li.active:last-child:before { content: ""; display: inline-block; background: #393D66; position: absolute; right: 0; top: 0; width: 2500px; height: 100%; z-index: 1; border-top: 0; border-left: 0; border-bottom: 0; margin-top: 0; transition: width 100ms linear 0s; } 

 <div class="onboarding-container"> <div class="onboarding-container-inner"> <ul class="onboarding-steps"> <li class="list-item active"> <span>1</span> </li> <li class="list-item"> <span>2</span> </li> <li class="list-item"> <span>3</span> </li> <li class="list-item"> <span>4</span> </li> </ul> </div> </div>