我在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 3没有checkboxes的样式,所以我发现a custom made与Bootstrap样式非常匹配。
.checkbox label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.checkbox .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.checkbox label input[type="checkbox"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Default checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option one
</label>
</div>
<!-- Checked checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option two is checked by default
</label>
</div>
<!-- Disabled checkbox -->
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option three is disabled
</label>
</div>
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 13%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- Default radio -->
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option one
</label>
</div>
<!-- Checked radio -->
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option two is checked by default
</label>
</div>
<!-- Disabled radio -->
<div class="radio disabled">
<label>
<input type="radio" name="o3" value="" disabled>
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option three is disabled
</label>
</div>
您可以通过用图标更改Bootstrap来从Font Awesome或[icon name]
中选择自己的图标。
<span class="cr"><i class="cr-icon [icon name]"></i>
例如:
glyphicon glyphicon-remove
对于Bootstrap,或fa fa-bullseye
for Font Awesome.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-remove"></i></span>
Bootstrap - Custom icon checkbox
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
Font Awesome - Custom icon radio checked by default
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
Font Awesome - Custom icon radio
</label>
</div>
您必须将Bootstrap版本4与custom-*
类一起使用才能获得此样式:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- example code of the bootstrap website -->
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
<!-- your code with the custom classes of version 4 -->
<div class="checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" [(ngModel)]="rememberMe" name="rememberme" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Remember me</span>
</label>
</div>
文档: https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1
Bootstrap版本3上的自定义复选框样式?Bootstrap版本3没有自定义复选框样式,但是您可以使用自己的样式。在这种情况下:How to style a checkbox using CSS?
这些自定义样式仅自版本4起可用。
/* The customcheck */
.customcheck {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.customcheck input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 5px;
}
/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
background-color: #02cf32;
border-radius: 5px;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.customcheck .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="container">
<h1>Custom Checkboxes</h1></br>
<label class="customcheck">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="customcheck">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="customcheck">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="customcheck">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
正如其他人所说,您追求的样式实际上只是Mac OS复选框样式,因此在其他设备上看起来将完全不同。
事实上,您链接的两个屏幕截图都显示了Chrome在Mac OS上的复选框的外观,灰色显示为非100%缩放级别。
[这里有一个使用Font Awesome 5 free的样式复选框和单选框示例[
/*General style*/
.custom-checkbox label, .custom-radio label {
position: relative;
cursor: pointer;
color: #666;
font-size: 30px;
}
.custom-checkbox input[type="checkbox"] ,.custom-radio input[type="radio"] {
position: absolute;
right: 9000px;
}
/*Custom checkboxes style*/
.custom-checkbox input[type="checkbox"]+.label-text:before {
content: "\f0c8";
font-family: "Font Awesome 5 Pro";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
.custom-checkbox input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #2980b9;
animation: effect 250ms ease-in;
}
.custom-checkbox input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
.custom-checkbox input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
/*Custom checkboxes style*/
.custom-radio input[type="radio"]+.label-text:before {
content: "\f111";
font-family: "Font Awesome 5 Pro";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
.custom-radio input[type="radio"]:checked+.label-text:before {
content: "\f192";
color: #8e44ad;
animation: effect 250ms ease-in;
}
.custom-radio input[type="radio"]:disabled+.label-text {
color: #aaa;
}
.custom-radio input[type="radio"]:disabled+.label-text:before {
content: "\f111";
color: #ccc;
}
@keyframes effect {
0% {
transform: scale(0);
}
25% {
transform: scale(1.3);
}
75% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<script src="https://kit.fontawesome.com/2a10ab39d6.js"></script>
<div class="col-md-4">
<form>
<h2>1. Customs Checkboxes</h2>
<div class="custom-checkbox">
<div class="form-check">
<label>
<input type="checkbox" name="check" checked> <span class="label-text">Option 01</span>
</label>
</div>
<div class="form-check">
<label>
<input type="checkbox" name="check"> <span class="label-text">Option 02</span>
</label>
</div>
<div class="form-check">
<label>
<input type="checkbox" name="check"> <span class="label-text">Option 03</span>
</label>
</div>
<div class="form-check">
<label>
<input type="checkbox" name="check" disabled> <span class="label-text">Option 04</span>
</label>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<form>
<h2>2. Customs Radios</h2>
<div class="custom-radio">
<div class="form-check">
<label>
<input type="radio" name="radio" checked> <span class="label-text">Option 01</span>
</label>
</div>
<div class="form-check">
<label>
<input type="radio" name="radio"> <span class="label-text">Option 02</span>
</label>
</div>
<div class="form-check">
<label>
<input type="radio" name="radio"> <span class="label-text">Option 03</span>
</label>
</div>
<div class="form-check">
<label>
<input type="radio" name="radio" disabled> <span class="label-text">Option 04</span>
</label>
</div>
</div>
</form>
</div>