Question

我正在尝试水平复选框。我正在ipad上创建应用程序，所以我有足够的空间来显示水平复选框，如图所示。我可以显示复选框或方框复选框。但它们显示在垂直列表中但我需要在水平列表上这是我的

http://play.ionic.io/app/1c4c988a3858 我面临两个问题

复选框列表是垂直的。但我需要横向列表
如何背景绿色。

我阅读了此http://ionicframework.com/docs/components/#checkbox的文档这是我的代码 http://play.ionic.io/app/1c4c988a3858

我希望此类复选框显示在图片

！[在此处输入图片说明] [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>

Answer 1

添加以下css以使所选复选框变为绿色：

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

如何在水平方向制作复选框？

1 个答案: