Ionic toggle checkboxes with 2 colors

2.5k Views Asked by Maboo At 03 April 2025 at 06:28

I'm trying to figure out how (and if) I can use 2 colors for an ionic toggle checkbox, so that for instance unselected will be toggle-assertive and selected will be toggle-balanced, all functional with animations.

Anyone has done it before?

Original Q&A

There are 1 best solutions below

Jess Patton On 12 June 2015 at 14:53 BEST ANSWER

Just set the .toggle input + track color to what you want. for instance this will be assertive when not checked and possitive when checked:

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 toggle checkboxes with 2 colors

There are 1 best solutions below

Related Questions in ANDROID

Related Questions in HTML

Related Questions in CSS

Related Questions in IONIC-FRAMEWORK

Related Questions in HYBRID-MOBILE-APP

Trending Questions

Popular # Hahtags

Popular Questions