javascript - 复选框的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 -*/

我的复选框是这样来的:

但我希望它是:复选框应该出现在第二行。

请帮我看看我可以修改什么样式。 我的 fiddle :http://jsfiddle.net/tsnd5Lso/

Answer 1

(只需将 ::before 更改为 ::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>