如何使切换按钮响应？

Question

我不知道如何使用我的输入响应引导程序样式。

因为每次我试图实现它，它都会呈现一个基本的丑陋复选框。我放松了自己的风格。

我有一个字段:secret(boolean)，我想用它来制作一个切换按钮。

这是我的代码：

/*** TOGGLE DEFAULT ***/

.TriSea-technologies-Switch>input[type="checkbox"] {
  display: none;
}

.TriSea-technologies-Switch>label {
  cursor: pointer;
  height: 0px;
  position: relative;
  width: 40px;
}

.TriSea-technologies-Switch>label::before {
  background: rgb(0, 0, 0);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  margin-left: -20px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px;
}

.TriSea-technologies-Switch>label::after {
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px;
}

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

.TriSea-technologies-Switch>input[type="checkbox"]:checked+label::after {
  background: inherit;
  left: 20px;
}


/*** TOGGLE DEFAULT ***/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-inputs">
  <h4>
    Nom du groupe :
  </h4>
  <%= f.input :name, label: false %>
    <br>
    <h4 style="width: 330px; text-align:center; margin-left:30px;">
      <div class="pull-left">
        Groupe secret
      </div>
      <div class="TriSea-technologies-Switch pull-right" style="margin-right:20px;">
        <input id="TriSeaSuccess" name="TriSea1" type="checkbox" />
        <label for="TriSeaSuccess" class="label-success"></label>
      </div>
    </h4>
    <%= f.hidden_field :admin, :value => current_user.id  %>
</div>

我应该使用宝石吗？或者我可以直接用秘密或JavaScript函数来制作它？