Question

我正在使用MaterialiseCSS Framework，我想在表单中使用复选框。默认情况下，复选框位于我的标签左侧（默认情况下为“从左到右”），但我想将复选框的位置更改为标签文本之前。

<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 {
    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 2

经过一些测试，这对我有用：

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

在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;
}

Answer 3

未勾选复选框时

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

检查checkbx时

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

Cascade Property Helped。

Answer 4

这也可以解决问题:(正确的答案对我来说没有用），那确实......

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

Answer 5

body{
    direction: rtl;
}
/*CheckBox R2L*/
[type="checkbox"] + span:not(.lever) {
    padding-right: 27px;
}
[type="checkbox"].filled-in:not(:checked) + span:not(.lever):before, 
[type="checkbox"].filled-in:checked + span:not(.lever):before {
    right: 10px;
}

[type="checkbox"].filled-in:not(:checked) + span:not(.lever):after,
[type="checkbox"].filled-in:checked + span:not(.lever):after {
    right: 0;
}

<!DOCTYPE html>
  <html>
    <head>
      <!--Materialize CSS-->
    <link href="~/css/ghpages-materialize.css" rel="stylesheet" />
    </head>

    <body>
      <p class="right">
        <label>
            <input type="checkbox" class="filled-in" checked="checked" />
            <span>أرسل لي إيميل عند إضافة إجابة</span>
        </label>
      </p>
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <!--Materialize js-->
    <script src="/materialize/js/materialize.min.js"></script>
    </body>
  </html>

Click here to see the final result

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

5 个答案: