Android 带有2种颜色的离子切换复选框_Android_Html_Css_Ionic Framework_Hybrid Mobile App

Android 带有2种颜色的离子切换复选框

android html css ionic-framework

Android 带有2种颜色的离子切换复选框,android,html,css,ionic-framework,hybrid-mobile-app,Android,Html,Css,Ionic Framework,Hybrid Mobile App,我试图弄清楚我如何（如果）使用2种颜色作为“离子切换”复选框，因此，例如，未选中的将是“切换断言”，选中的将是“切换平衡”，所有功能都带有动画以前有人这样做过吗？只需将.toggle输入+曲目颜色设置为您想要的颜色即可。例如，这在未选中时是肯定的，在选中时是肯定的： CSS: HTML: 很棒的应用程序 HTML5 ... 只需将.toggle输入+曲目颜色设置为所需颜色即可。例如，这在未选中时是肯定的，在选中时是肯定的： CSS: HTML: 很棒的应用程序 HTML5 .

我试图弄清楚我如何（如果）使用2种颜色作为“离子切换”复选框，因此，例如，未选中的将是“切换断言”，选中的将是“切换平衡”，所有功能都带有动画

以前有人这样做过吗？

只需将.toggle输入+曲目颜色设置为您想要的颜色即可。例如，这在未选中时是肯定的，在选中时是肯定的：

CSS:

HTML:


很棒的应用程序


HTML5

...

只需将.toggle输入+曲目颜色设置为所需颜色即可。例如，这在未选中时是肯定的，在选中时是肯定的：

CSS:

HTML:


很棒的应用程序


HTML5

...

另外，为了与Ionic的默认外观相匹配，我还将“边框颜色”更改为与跟踪器相同的颜色，现在看起来我们甚至都没碰它。：）令人惊叹的！很高兴我能帮忙！另外，为了与Ionic的默认外观相匹配，我还将“边框颜色”更改为与跟踪器相同的颜色，现在看起来我们甚至没有触摸它。：）令人惊叹的！很高兴我能帮忙！

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

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