logo标签列表

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

htmlcssmaterialize
3

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

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

有什么办法可以实现吗？

5个回答
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;
}

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

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>

点击此处查看最终结果

欢迎来到Stack Overflow！请不要仅仅回答源代码，尽量提供一个关于你的解决方案如何工作的好描述。参见：如何撰写一个好的答案？。谢谢。 - sɐunıɔןɐqɐp
1
当复选框未被选中时。
[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after
{
left:175px;
}

当复选框被选中时。
[type="checkbox"]:checked+label:before
{
left:175px;
}

级联属性有所帮助。
1
这可能也能解决问题：（正确答案对我不起作用），那个可以...
    [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;
    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接