我正在使用MaterializeCSS框架,并想在表单中使用复选框。默认情况下,复选框在我的标签左侧(默认从左到右),但我想将复选框的位置更改为在标签文本之前。
<p>
<input type="checkbox" id="rememberme" class="" />
<label class="right-align" for="rememberme">Remember me</label>
</p>
有什么办法可以实现吗?
我正在使用MaterializeCSS框架,并想在表单中使用复选框。默认情况下,复选框在我的标签左侧(默认从左到右),但我想将复选框的位置更改为在标签文本之前。
<p>
<input type="checkbox" id="rememberme" class="" />
<label class="right-align" for="rememberme">Remember me</label>
</p>
有什么办法可以实现吗?
[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;
}
经过一些测试,这是适用于我的方法:
我将复选框位置设为右侧,并将标签的右填充调整到我认为它处于正确位置
在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;
}
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>
[type="checkbox"]+label:before,
[type="checkbox"]:not(.filled-in)+label:after
{
left:175px;
}
[type="checkbox"]:checked+label:before
{
left:175px;
}
[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;
}