風格複選框水平像進度條

Question

我有一套複選框，基本上是一個接一個地渲染。

<div class="myCheck"> 
    <h5>You have choosen so far</h5> 
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > 
     <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled /> 
     <span class="mdl-checkbox__label">Marriage Hall</span> 
    </label> 

    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > 
     <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled /> 
     <span class="mdl-checkbox__label">Caterer</span> 
    </label> 
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > 
     <input type="checkbox" class="mdl-checkbox__input" disabled/> 
     <span class="mdl-checkbox__label">Decorator</span> 
    </label> 
</div> 

我想使它們像類似以下的水平進度條：

有人可以或許幫助我的CSS，因爲我不是造型方面的專家？一般情況下，如何在此插圖中呈現複選框？

Answer 1

.mdl-checkbox { 
 
    display: inline-block; 
 
    width: 100px; 
 
    text-align: center; 
 
    padding: 10px; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.mdl-checkbox:after, 
 
.mdl-checkbox:before { 
 
    height: 1px; 
 
    background-color: grey; 
 
    content: ""; 
 
    top: 16px; 
 
    position: absolute; 
 
    right:0; 
 
    left:0; 
 
} 
 

 
.mdl-checkbox:before { 
 
    right: calc(50% + 6px); 
 
} 
 

 
.mdl-checkbox:after { 
 
    left: calc(50% + 6px); 
 
} 
 

 
.mdl-checkbox:first-of-type:before { 
 
    display: none; 
 
} 
 

 
.mdl-checkbox:last-of-type:after { 
 
    display: none; 
 
} 
 

 
input { 
 
    width:14px; 
 
    height:14px; 
 
    border-width:1px; 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
}

<div class="myCheck"> 
 
    <h5>You have choosen so far</h5> 
 
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > 
 
     <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled /> 
 
     <span class="mdl-checkbox__label">Marriage Hall</span> 
 
    </label> 
 

 
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > 
 
     <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled /> 
 
     <span class="mdl-checkbox__label">Caterer</span> 
 
    </label> 
 
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" > 
 
     <input type="checkbox" class="mdl-checkbox__input" disabled/> 
 
     <span class="mdl-checkbox__label">Decorator</span> 
 
    </label> 
 
</div>