1

我在语义 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/

4

3 回答 3

6

这是你可以做的：

.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" />是透明的。

于 2014-08-20T06:03:02.803 回答
2

不知道你是否还有这个问题，但我找到了一种解决方案。就我而言，我有一张看起来像的桌子

<table>
  <tr>
    <td><label for="A_ID">select A</label></td>
    <td>
        <div class="ui checkbox">
          <input id="A_ID" type="checkbox">
          <label for="A_ID"></label>
        </div>
    </td>
  </tr>
</table>

因为我在它后面有一个标签，所以它可以工作（没有 Javascript）。

小例子http://jsfiddle.net/3xkrx/162/

于 2015-05-22T08:42:38.040 回答
1

所以你想要左边的标签？在标签上使用浮点数。

我已将课程 - .custom- 放在 div 上，但您可以申请现有课程 :)

举个例子！

HTML

<div class="ui toggle checkbox custom">

CSS

.custom label {
    float: left;
    margin: 0 5px 0;
}
于 2014-08-18T09:01:01.070 回答