css對齊復選框

Question

我有自定義復選框。

我的HTML：

<div class="checkboxes dashboard-checkboxes ng-scope">
    <label class="checkbox">
        <input type="checkbox" ng-model="component.visible" id="AlertsComponent" class="ng-pristine ng-valid">
        <span class="comp-name ng-scope ng-binding">Alerts by Entity</span>
    </label>
</div>

我的CSS：

/* checkbox -*/
.radios label,
.radios input[type="radio"] + span,
.radios input[type="radio"] + span::before,
.checkboxes label,
.checkboxes input[type="checkbox"] + span,
.checkboxes input[type="checkbox"] + span::before {
    display:inline-block;
    vertical-align:middle
}
.radios,
.checkboxes {
    position:relative
}
.radios label *,
.checkboxes label * {
    cursor:pointer
}
.radios input[type="radio"],
.checkboxes input[type="checkbox"] {
    position:absolute;
    display:none
}
.radios input[type="radio"] + span,
.checkboxes input[type="checkbox"] + span {
    color:#333
}
.radios label:hover span,
.checkboxes label:hover span {
    color:#000
}
.radios input[type="radio"] + span::before,
.checkboxes input[type="checkbox"] + span::before {
    margin:0 4px 0 0;
    width:13px;
    height:13px;
    border:solid 2px #ccc;
    background-size:13px;
    content:"";
    text-align:center;
    line-height:17px
}
.checkboxes input[type="checkbox"] + span:hover:before {
    border:solid 2px #5a5a5a
}
.radios input[type="radio"]:checked + span::before,
.checkboxes input[type="checkbox"]:checked + span::before {
    width:13px;
    height:13px;
    border:solid 2px #ccc;
    background-color:#FFFFFF;
    color:#01A982;
    line-height:17px
}
.radios input[type="radio"]:disabled + span,
.checkboxes input[type="checkbox"]:disabled + span {
    opacity:.4;
    cursor:default
}
.checkboxes input[type="checkbox"] + span::before {
    border-radius:inherit;
}
.radios input[type="radio"]:checked + span::before {
    content:"\2022";
    font-size:24px
}
.checkboxes li{
    list-style: none;
}

:root .checkboxes input[type="checkbox"]:checked + span:before {
    content: "\2713"; 
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
}
.checkboxes input[type="checkbox"]:checked + span::before {
    background-color: #FFFFFF;
    border: solid 2px #01A982;
    color: #01A982;
    line-height: 14px;
}
.checkboxes input[type="checkbox"]:checked + span::before {
    border: solid 2px #01A982;
}/* checkbox -*/

我的Checkbox以這種方式出現：

但我希望它是：復選框應該在第二行。

請幫幫我，我可以修改哪種風格。 我的小提琴： http ： //jsfiddle.net/tsnd5Lso/

Answer 1

（只需改變::before to ::after ）

CSS更新

.radios input[type="radio"] + span::before, .checkboxes input[type="checkbox"] + span::after {
margin:0 4px 0 40px;
width:13px;
height:13px;
border:solid 2px #ccc;
background-size:13px;
content:"";
text-align:center;
line-height:17px;
display:block;
}
:root .checkboxes input[type="checkbox"]:checked + span:after {
content:"\2713";
font-family: arial;
font-size: 14px;
font-weight: bold;
}
.checkboxes input[type="checkbox"]:checked + span::after {
background-color: #FFFFFF;
border: solid 2px #01A982;
color: #01A982;
line-height: 14px;
}

 /* checkbox -*/ .radios label, .radios input[type="radio"] + span, .radios input[type="radio"] + span::before, .checkboxes label, .checkboxes input[type="checkbox"] + span, .checkboxes input[type="checkbox"] + span::before { display:inline-block; vertical-align:middle } .radios, .checkboxes { position:relative } .radios label *, .checkboxes label * { cursor:pointer } .radios input[type="radio"], .checkboxes input[type="checkbox"] { position:absolute; display:none } .radios input[type="radio"] + span, .checkboxes input[type="checkbox"] + span { color:#333 } .radios label:hover span, .checkboxes label:hover span { color:#000 } .radios input[type="radio"] + span::before, .checkboxes input[type="checkbox"] + span::after { margin:0 4px 0 40px; width:13px; height:13px; border:solid 2px #ccc; background-size:13px; content:""; text-align:center; line-height:17px; display:block; } .checkboxes input[type="checkbox"] + span:hover:after { border:solid 2px #5a5a5a } .radios input[type="radio"]:checked + span::before, .checkboxes input[type="checkbox"]:checked + span::before { width:13px; height:13px; border:solid 2px #ccc; background-color:#FFFFFF; color:#01A982; line-height:17px; } .radios input[type="radio"]:disabled + span, .checkboxes input[type="checkbox"]:disabled + span { opacity:.4; cursor:default } .checkboxes input[type="checkbox"] + span::before { border-radius:inherit; } .radios input[type="radio"]:checked + span::before { content:"\\2022"; font-size:24px } .checkboxes li { list-style: none; } :root .checkboxes input[type="checkbox"]:checked + span:after { content:"\\2713"; font-family: arial; font-size: 14px; font-weight: bold; } .checkboxes input[type="checkbox"]:checked + span::after { background-color: #FFFFFF; border: solid 2px #01A982; color: #01A982; line-height: 14px; } .checkboxes input[type="checkbox"]:checked + span::before { border: solid 2px #01A982; } /* checkbox -*/ 

 <div class="checkboxes dashboard-checkboxes ng-scope"> <label class="checkbox"> <input type="checkbox" ng-model="component.visible" id="AlertsComponent" class="ng-pristine ng-valid"> <span class="comp-name ng-scope ng-binding">Alerts by Entity</span> </label> </div> 

Answer 2

改變這個：

.radios input[type="radio"] + span::before,
.checkboxes input[type="checkbox"] + span::before {
margin:0 4px 0 0;
width:13px;
height:13px;
border:solid 2px #ccc;
background-size:13px;
content:"";
text-align:center;
line-height:17px
}

對此：

.radios input[type="radio"] + span::after, .checkboxes input[type="checkbox"] + span::after {
margin: 4px auto 0 auto;
width: 13px;
height: 13px;
border: solid 2px #ccc;
background-size: 13px;
content: "";
text-align: center;
line-height: 17px;
display: block;
}

並且每個::之前的樣式到::之后

檢查小提琴http://jsfiddle.net/mpLes4q8/2/