自定义 Bootstrap 复选框 [英] Customize Bootstrap checkboxes

查看：31
本文介绍了自定义 Bootstrap 复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的 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="容器"><form class="form-signin"><h2 class="form-signin-heading">请登录</h2><label for="inputEmail" class="sr-only">用户名</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">密码</label><input [(ngModel)]="loginUser.Password" type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required><a *ngIf="register == false" (click)="registerState()">注册</a><div class="checkbox"><标签><input type="checkbox" [(ngModel)]="rememberMe" name="rememberme">记得我

<button *ngIf="register == false" (click)="login()" class="btn btn-lg btn-primary btn-block" type="submit">登录</button></表单>

它的样子:

我希望 Bootstrap 风格的样子:

解决方案

由于 Bootstrap 3 没有 checkboxes 我发现 定制，非常适合 Bootstrap 风格.

复选框

.checkbox label:after {内容: '';显示:表；清楚:两者；}.checkbox .cr {位置:相对；显示:内联块；边框:1px 实心 #a9a9a9;边界半径:0.25em；宽度:1.3em；高度:1.3em；向左飘浮;右边距:.5em；}.checkbox .cr .cr-icon {位置:绝对；字体大小:.8em；行高:0；顶部:50%；左:15%；}.checkbox 标签输入[type="checkbox"] {显示:无；}.checkbox 标签输入[type="checkbox"]+.cr>.cr-icon {不透明度:0；}.checkbox 标签输入[type="checkbox"]:checked+.cr>.cr-icon {不透明度:1；}.checkbox 标签输入[type="checkbox"]:disabled+.cr {不透明度:0.5；}

<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="checkbox"><标签><input type="checkbox" value=""><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>选项一

<!-- 选中复选框--><div class="checkbox"><标签><input type="checkbox" value=""checked><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>默认选中选项二

<!-- 禁用复选框--><div class="checkbox disabled"><标签><input type="checkbox" value="" disabled><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>选项三被禁用

收音机

.checkbox label:after,.radio 标签:{内容: '';显示:表；清楚:两者；}.checkbox .cr,.radio .cr {位置:相对；显示:内联块；边框:1px 实心 #a9a9a9;边界半径:0.25em；宽度:1.3em；高度:1.3em；向左飘浮;右边距:.5em；}.radio .cr {边界半径:50%；}.checkbox .cr .cr 图标，.radio .cr .cr-icon {位置:绝对；字体大小:.8em；行高:0；顶部:50%；左:13%；}.radio .cr .cr-icon {左边距:0.04em；}.checkbox 标签输入[type="checkbox"],.radio 标签输入[type="radio"] {显示:无；}.checkbox 标签输入[type="checkbox"]+.cr>.cr-icon,.radio 标签输入[type="radio"]+.cr>.cr-icon {不透明度:0；}.checkbox 标签输入[type="checkbox"]:checked+.cr>.cr-icon,.radio 标签输入[type="radio"]:checked+.cr>.cr-icon {不透明度:1；}.checkbox 标签输入[type="checkbox"]:disabled+.cr,.radio 标签输入[type="radio"]:disabled+.cr {不透明度:0.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="37WqIM7UoBtwHOG匿名"><!-- 默认收音机--><div class="radio"><标签><input type="radio" name="o3" value=""><span class="cr"><i class="cr-icon fa fa-circle"></i></span>选项一

<!-- 检查收音机--><div class="radio"><标签><input type="radio" name="o3" value=""checked><span class="cr"><i class="cr-icon fa fa-circle"></i></span>默认选中选项二

<!-- 禁用无线电--><div class="radio disabled"><标签><input type="radio" name="o3" value="" disabled><span class="cr"><i class="cr-icon fa fa-circle"></i></span>选项三被禁用

自定义图标

您可以在 Bootstrap 或 Font Awesome 通过使用您的图标更改 [icon name].

<span class="cr"><i class="cr-icon [图标名称]"></i>

例如:

.checkbox label:after,.radio 标签:{内容: '';显示:表；清楚:两者；}.checkbox .cr,.radio .cr {位置:相对；显示:内联块；边框:1px 实心 #a9a9a9;边界半径:0.25em；宽度:1.3em；高度:1.3em；向左飘浮;右边距:.5em；}.radio .cr {边界半径:50%；}.checkbox .cr .cr 图标，.radio .cr .cr-icon {位置:绝对；字体大小:.8em；行高:0；顶部:50%；左:15%；}.radio .cr .cr-icon {左边距:0.04em；}.checkbox 标签输入[type="checkbox"],.radio 标签输入[type="radio"] {显示:无；}.checkbox 标签输入[type="checkbox"]+.cr>.cr-icon,.radio 标签输入[type="radio"]+.cr>.cr-icon {不透明度:0；}.checkbox 标签输入[type="checkbox"]:checked+.cr>.cr-icon,.radio 标签输入[type="radio"]:checked+.cr>.cr-icon {不透明度:1；}.checkbox 标签输入[type="checkbox"]:disabled+.cr,.radio 标签输入[type="radio"]:disabled+.cr {不透明度:0.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="37WqIM7UoBtwHOG匿名"><div class="checkbox"><标签><input type="checkbox" value=""checked><span class="cr"><i class="cr-icon glyphicon glyphicon-remove"></i></span>Bootstrap - 自定义图标复选框

<div class="radio"><标签><input type="radio" name="o3" value=""checked><span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>Font Awesome - 默认选中自定义图标单选

<div class="radio"><标签><input type="radio" name="o3" value=""><span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>Font Awesome - 自定义图标收音机

I'm using Bootstrap in my Angular application and all other styles are working like they should, but checkbox style doesn't. It just look like plain old checkbox.

<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>

What it looks like:

What I want it to look like with Bootstrap style:

解决方案

Since Bootstrap 3 doesn't have a style for checkboxes I found a custom made that goes really well with Bootstrap style.

Checkboxes

.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>

Radio

.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>

Custom icons

You can choose your own icon between the ones from Bootstrap or Font Awesome by changing [icon name] with your icon.

<span class="cr"><i class="cr-icon [icon name]"></i>

For example:

.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 复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆