mdl 复选框应该在 RTL 语言的右侧答案

【问题标题】：mdl checkbox should be on right for RTL languagesmdl 复选框应该在 RTL 语言的右侧
【发布时间】：2017-05-28 19:03:15
【问题描述】：

我正在使用 mdl-checkbox 和复选框右侧的文本。我想在 RTL 语言的情况下切换这两个组件的顺序（复选框左侧的文本），但我无法将文本移到左侧（它始终在右侧）。

我尝试了许多“dir=rtl”、direction:rtl、align 等变体。但文本仍保留在右侧。我也尝试使用一些 CSS 选项，但我仍然无法切换顺序。

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" />
    <span class="mdl-checkbox__label">My Text</span>
</label>

JSFIDDLE Example

如何在不影响页面其余部分的情况下轻松切换文本和复选框的顺序？

页面上的所有其他组件在 RTL 语言中表现良好。

谢谢！

【问题讨论】：

stackoverflow.com/questions/34741513/…
谢谢，但它不适用于 mdl-checkbox。标准复选框开关正常

标签： html css material-design

【解决方案1】：

请检查下面给出的链接。这些可能会帮助您创建复选框。

Github Link：我没用过，你可以查一下。愿这个也能帮助到你。

RTL CDN for MDL : 我用这个创建了 sn-p。

Check this one also

#a {
  width: 90px;
}

<link href="https://cdn.rtlcss.com/mdl/1.2.1/material.rtl.min.css" rel="stylesheet" />
<script src="https://cdn.rtlcss.com/mdl/1.2.1/material.min.js"></script>

<div id="a">
  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>
</div>

【讨论】：

谢谢。看起来<link href="https://cdn.rtlcss.com/mdl/1.2.1/material.rtl.min.css" rel="stylesheet" /> 解决了复选框方向问题，但它破坏了许多其他组件的位置和颜色。
然后你必须通过覆盖 mdl css 来应用你自己的 css。使用float 或删除/更改position 属性。通过使用 DOM 检查器检查和更改 css 来检查

【解决方案2】：

在使用 material.rtl.min.css 和 material.min.css 制作差异后，我发现以下 CSS 解决了问题：

.mdl-radio.is-upgraded, .mdl-checkbox.is-upgraded{padding-right:24px}
.mdl-radio__outer-circle, .mdl-checkbox__box-outline{right:0;}
.mdl-radio__inner-circle {right:4px;}
.mdl-radio__ripple-container, .mdl-checkbox__ripple-container{right:-10px;}

JSFIDDLE Solution

感谢大家的帮助！

【讨论】：