MaterializeCSS中的从右到左复选框而不是从左到右

Question

我正在使用MaterializeCSS框架，我想在表单中使用复选框。默认情况下，复选框位于标签的左侧(默认从左到右)，但我希望将复选框的位置更改为标签文本之前。

<p>
    <input type="checkbox" id="rememberme" class="" />
    <label class="right-align"  for="rememberme">Remember me</label>
</p>

有没有可能呢？

Answer 1

未选中复选框时

[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after
{
left:175px;
}

当checkbx被选中时

[type="checkbox"]:checked+label:before
{
left:175px;
}

Cascade属性有所帮助。

Answer 2

我找到了一个更好的解决方案

​

[type="checkbox"] + label::before, [type="checkbox"]:not(.filled-in) + label::after {
    right: 0;
}

[type="checkbox"] + label {
    padding-right: 26px;
}

[type="checkbox"]:checked + label::before {
    right: 8px;
    left: 0;
}
.filled-in[type="checkbox"]:checked + label::before {
    right: 9px;
    left: unset;
}
.filled-in[type="checkbox"]:checked + label::after {
}
.filled-in[type="checkbox"] + label::before, .filled-in[type="checkbox"] + label::after {
    right: -1px;
}
.filled-in[type="checkbox"]:not(:checked) + label::before {
    right: 10px;
}
[type="radio"]:not(:checked) + label {
    padding-right: 26px;
}
[type="radio"]:checked + label {
    padding-right: 26px;
}
[type="radio"] + label::before, [type="radio"] + label::after {
    right: 0;left:unset;
}
label::before, [type="radio"] + label::after {
    right: 0;left:unset;
}

​

Answer 3

经过一些测试，以下是对我有效的方法：

我将复选框放在右边，并将标签填充到右边，直到我觉得它位于正确的位置

在css文件中：

body{ direction: rtl }

/*  align the checkbox to the right    */
[type="checkbox"]+label:before, [type="checkbox"]+label:after{        
  right: 0px !important;
}

/*  align the v in the center of the checkbox    */
[type="checkbox"].filled-in:checked+label:before{
  right: 11px !important;
}

/*  align the label left to the checkbox   */
[type="checkbox"]+label{
  padding-right: 27px !important;
}