how to make checkbox in horizontally?

I am trying to make checkbox horizontally .I am making application on ipad so I have enough space to display horizontal checkbox as shown image. I am able to display check box or square checkbox .But they are show in vertical list but I need that on horizontal list here is my

http://play.ionic.io/app/1c4c988a3858 I am facing two issue

  1. checkbox list is in vertical .But I need those list in horizontal

  2. how to how background green color .

I read documentation from this http://ionicframework.com/docs/components/#checkbox here is my code http://play.ionic.io/app/1c4c988a3858

I want this type of checkbox as show in image

![enter image description here][1]

<!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>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Awesome App</h1>
        </ion-header-bar>
        <ion-content class="padding">
            <ul class="">

                <li class="">
                    <ion-checkbox class="checkbox-square checkboxList">
                        Account
                    </ion-checkbox>
                </li>
                <li class="checkbox-square checkboxList">
                    <ion-checkbox>
                        open transaction
                    </ion-checkbox>
                </li>
                <li class="checkbox-square checkboxList">
                    <ion-checkbox>
                        closed transaction
                    </ion-checkbox>
                </li>

                <li class="checkbox-square checkboxList">
                    <ion-checkbox>
                        dispute
                    </ion-checkbox>
                </li>

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

</html>

Add the following css to make the selected checkboxes green:

.checkbox input:checked + .checkbox-icon:before,
.checkbox input:checked:before {
    background: #51AE46;
    border-color: #51AE46;
}