Question

我在语义用户界面中使用了一个复选框。我想切换标签的位置和输入，但它证明是一种痛苦。我正在使用切换复选框。

<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中切换输入和标签，切换功能将停止工作。我甚至无法相对定位元素...是否有一些我可以添加的简单类或者某些东西可以使输入和标签切换定位，同时仍然保持红绿色切换的功能？ / p>

谢谢..

更新：我在这里做了一个小提琴：这包括语义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" />是透明的。

Answer 2

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

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

Have an example!

HTML

<div class="ui toggle checkbox custom">

CSS

.custom label {
    float: left;
    margin: 0 5px 0;
}

Answer 3

不确定您是否还有这个问题，但我找到了一种解决方案。在我的情况下，我有一个看起来像

的表

<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/

语义UI，定位标签

3 个答案: