使用伪元素检查后，将跨度与自定义复选框对齐：之前

Question

我有一个自定义复选框，它运行良好，但我有一些问题，在HTML中标签内的跨度对齐，

以下是代码：

HTML

<div class="checkRemember">
    <input type="checkbox" class="uniform" name="remember" id="chkRememberMe">
    <label for="chkRememberMe">
        <span>Remember Me</span>
    </label>
</div>

的CSS

.checkRemember {
    display: inline-block;
}

.checkRemember > input[type=checkbox] {
    display: none;
}

.checkRemember > input[type="checkbox"] ~ label {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    background: white;
    height: 15px;
    width: 15px;
    border: 1px solid #D9D9D9;
    clear: both;
    border-radius: 3px;
}
.checkRemember > input[type="checkbox"] ~ label > span {
    display:block;
    width: 125px;
    padding-left: 18px;
}
.checkRemember > input[type="checkbox"]:checked ~ label:before {
    content: '\2714';
    position: relative;
    left: 0.15em;
    top: -1pt;
    font-size: 9pt;
    color: #565656;
    clear: both;
}

问题：复选框显示正确，但是当我选中该复选框时，标签内的范围向下移动，当我们检查该复选框时，是否仍然正常？

A fiddle来说明问题。

非常感谢任何帮助。

Answer 1

替换

.checkRemember > input[type="checkbox"]:checked ~ label:before {
    clear: both;
    color: #565656;
    content: "✔";
    float: left;//add this
    font-size: 9pt;
    left: 0.15em;
    position: relative;
    top: 1pt;//change
}

DEMO

Answer 2

试试这个。

.checkRemember > input[type="checkbox"]:checked ~ label:before {
content: '\2714';
position: absolute;
left: 1em;
top: 8pt;
font-size: 9pt;
color: #565656;
clear: both;

Answer 3

只需将此代码添加到您的代码

即可

[for=chkRememberMe]{position:relative;}
[for=chkRememberMe] span{position:absolute;}

LIVE DEMO

问题是，当未选中复选框时，它看起来像这样：

当它被检查时，它看起来像这样：