Search code examples
htmlcssionic-frameworktogglebutton

Ionic: customize toggle button.

I am developing ionic application now. May I know can I customize ionic button become as picture below?

enter image description here

When user slide on the button. It will become like this

enter image description here

Solution

  • edit ionic.css

    This is the snippet code for the ionic.css

    /**
 * Toggle
 * --------------------------------------------------
 */
.item-toggle {
  pointer-events: none; }

.toggle {
  position: relative;
  display: inline-block;
  pointer-events: auto;
  margin: -5px;
  padding: 5px; }
  .toggle input:checked + .track {
    border-color: #4cd964;
    background-color: #4cd964; }
  .toggle.dragging .handle {
    background-color: #f2f2f2 !important; }
...
...
...