【发布时间】：2017-10-31 22:35:38
【问题描述】：
我在我的 Angular 应用程序中使用 Bootstrap，所有其他样式都可以正常工作，但复选框样式却没有。它看起来就像普通的旧复选框。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please log in</h2>
<label for="inputEmail" class="sr-only">User name</label>
<input [(ngModel)]="loginUser.Username" type="username" name="username" id="inputEmail" class="form-control" placeholder="User name" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input [(ngModel)]="loginUser.Password" type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<a *ngIf="register == false" (click)="registerState()">Register</a>
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="rememberMe" name="rememberme"> Remember me
</label>
</div>
<button *ngIf="register == false" (click)="login()" class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
</div>它的样子：
我希望它看起来像 Bootstrap 样式：
【问题讨论】：
-
Bootstrap（4之前）没有特定的checkbox样式，第二种是macOS/OS X的样式
-
@PaoloForgia 都是 macOS/OS X 复选框。一是页面放大约 110%，二是 100% 缩放。这是在这里回答的stackoverflow.com/a/44280910/8081009
-
在所有情况下，您都必须隐藏原始复选框并添加一些自定义的“假”复选框。我发现 w3schools 提供的解决方案最简单：w3schools.com/howto/howto_css_custom_checkbox.asp，它非常接近您的要求。
标签： css twitter-bootstrap checkbox