Bootstrap Snippet Fancy Radio and Checkbox using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>Fancy Radio and Checkbox</h2></h2>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <div class="checkbox checkbox-primary pl5">
              <input id="remember" name="remember" type="checkbox" class="custom-control-input">
              <label for="remember"> ·· Checkbox</label>
            </div>
            <div class="radio radio-primary">
                <input type="radio" name="radio1" id="otp" value="otp" data-value="otp" class="radio_val">
                <label for="otp">
                    Radio
                </label>
            </div>
          </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.checkbox {
  padding-left: 20px; }
.checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 0px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555; }
.checkbox input[type="checkbox"] {
opacity: 0; }
.checkbox input[type="checkbox"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fancy Radio and Checkbox"
Bootstrap 3.3.0 Snippet by ankitsoni18

Related: See More

Questions / Comments:

"Fancy Radio and Checkbox" Bootstrap 3.3.0 Snippet by ankitsoni18

Related: See More

Questions / Comments:

"Fancy Radio and Checkbox"
Bootstrap 3.3.0 Snippet by ankitsoni18