语义UI，定位标签

Question

我在语义UI中使用了一个复选框。我想切换标签和输入的位置，但事实证明这很痛苦。我正在使用切换复选框。

<div class="ui toggle checkbox">
  <input id="privacy" type="checkbox" checked="checked">
  <label for="privacy">Public</label>
</div>

语义UI复选框文档位于此处：http : //semantic-ui.com/modules/checkbox.html#/definition

如果我在html中切换输入和标签，切换功能将停止工作。我什至似乎都无法相对定位元素...我可以添加一些简单的类吗，还是可以使输入和标签切换位置，同时仍保持红绿色切换功能的东西？

谢谢..

更新：我正在这里的小提琴：这包括语义ui css和js。

http://jsfiddle.net/3xkrx/30/

Answer 1

您可以执行以下操作：

.ui.toggle.checkbox label {
    padding-left:0;
    padding-right:4em;
}

.ui.checkbox input,
.ui.toggle.checkbox label:before {
    left:auto;
    right:0;
}

.ui.toggle.checkbox label:after {
    left:auto;
    right:1.75em;
    transition:background 0.3s ease 0s, right 0.3s ease 0s;
}

.ui.toggle.checkbox input:checked + label:after {
    left:auto;
    right:0.5em;
    transition:background 0.3s ease 0s, right 0.3s ease 0s;
}

复选框的样式基本上只是这样。实际<input type="checkbox" />是透明的。