个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试水平制作复选框。我正在 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>
最佳答案
添加以下 css 使选中的复选框变为绿色:
.checkbox input:checked + .checkbox-icon:before,
.checkbox input:checked:before {
background: #51AE46;
border-color: #51AE46;
}
关于javascript - 如何水平制作复选框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31373395/
25
4
0
我是一名优秀的程序员,十分优秀！