Question

我需要创建一个如下所示的toogle \ switch按钮：

我能够将性别标志添加到按钮及其基础 - 但由于图标是使用Before方法添加的 - 然后我无法更改它的位置或大小 - 导致“之前”是对灰色基础的引用......而不是对图标本身的引用..

问题在于：正如你所看到的 - 我无法改变图标的位置或颜色 - 如果我这样做的话 - 我会更改基本的灰色条...而不是它的图标......

这是我的HTML：

    <div class="cont">

      <div class="material-switch">
        <input id="someSwitchOptionDefault" name="someSwitchOption001" 
       type="checkbox" />
        <label for="someSwitchOptionDefault" class="label-default"></label>
      </div>

    </div>

这是css：

      .material-switch > input[type="checkbox"] {
        display: none;
      }

    .material-switch > label {
        cursor: pointer;
        height: 0px;
        position: relative;
        width: 40px;
    }

    .material-switch > label::before{
        content: "\f229";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;

    }
    .material-switch > label::before {
        background: rgb(0, 0, 0);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
        border-radius: 8px;

        height: 16px;
        margin-top: -8px;
        position: absolute;
        opacity: 0.3;
        transition: all 0.4s ease-in-out;
        width: 100px;
    }

    .material-switch > label::after {
        content: "\f222";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        /*--adjust as necessary--*/
        color: #000;
        font-size: 18px;
        background: rgb(255, 255, 255);
        border-radius: 15px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);

        height: 24px;
        left: -4px;
        margin-top: -8px;
        position: absolute;
        top: -4px;
        transition: all 0.3s ease-in-out;
        width: 73px;
    }

     .material-switch > input[type="checkbox"]:checked + label::before {
        background: inherit;
        opacity: 0.5;
     }

     .material-switch > input[type="checkbox"]:checked + label::after {
        background: inherit;
        left: 30px;
     }

     .cont{
      padding:50px;
     }

这是我的Fiddle

Answer 1

由于您正在使用<targetPath>，因此您必须考虑使用简单文字，这意味着如果您希望图标右对齐，则只需添加fa icons如下图标：

text-align:right

如果您想更改颜色，只需添加.material-switch > label::before { content: "\f229"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; text-align: right; }

即可

<强>更新

检查更新后的fiddle

Answer 2

您必须在:before内容中切换图标。您需要根据选中的值切换内容。 here is the fiddle update

Answer 3

添加此css：

您正在使用标签之前和之后。你必须在之前和之后使用

.material-switch input + label span :: before and after

像这样它会解决你的问题。

示例：

.material-switch input + label span {
  left: 15px;
  position: relative;
}

.material-switch input + label span::before {
  color: #42c8c2;
  content: "";
  font-family: fontawesome;
  left: -20px;
  position: absolute;
  top: -2px;
}

以及在检查输入之前和之后使用时。

希望这会对你有帮助......

将fa图标添加到开关/切换按钮的基础

3 个答案: