Question

我试图弄清楚如何（以及如果）我可以使用2种颜色作为离子切换复选框，以便例如未选择的将是切换断言并且选择将是切换平衡的，所有功能都与动画一致

以前有人做过吗？

Answer 1

只需将.toggle输入+轨道颜色设置为您想要的颜色。例如，在未选中时，这将是自信的，并且在检查时是正确的：

CSS：

    /* Styles here */
.toggle input + .track{
  background-color: #ef473a;
}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane ng-controller="main">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding has-header">
      <ul class="list">

  <li class="item item-toggle">
     HTML5
     <label class="toggle toggle-positive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  ...

</ul>
      </ion-content>
    </ion-pane>
  </body>
</html>

Ionic切换复选框有2种颜色

1 个答案: