html - 将复选框移动到标签的右侧

Question

我想知道是否有办法将复选框移动到标签的右侧？默认情况下它总是在左边。我怎样才能将它向右移动？

<style>
input[type=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    left:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
    height: 28px;
    display: inline-block;
    line-height: 28px;
    background-repeat: no-repeat;
    cursor: pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -28px;
}
label.css-label {
    background-image: url(wp-content/uploads/2017/02/cb.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>

HTML

<input type="checkbox" id="checkboxG1" class="css-checkbox" />
<label for="checkboxG1" class="css-label">TEXT</label>

Answer 1

有什么原因不能在 HTML 中交换标签和输入吗？

<label for="checkboxG1" class="css-label">TEXT</label>
<input type="checkbox" id="checkboxG1" class="css-checkbox" />