Bootstrap Snippet Pure CSS Custom Radiobox using HTML CSS Bootstrap Javascript

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <div class="radio-button">
                <div class="btn-group">
                        <ul class="pagination">
                            <li>
                              <input id="left" type="radio" name="radAnswer" value="Left" checked="checked"/>
                                <a href="#">
                                    <label for="left" class="input-group">Left</label>
                                </a>
                            </li>
                            <li>
                                <input id="middle" type="radio" name="radAnswer" value="Middle" />
                                 <a href="#">
                                     <label for="middle" class="input-group">Middle</label>
                                 </a>
                            </li>
                            <li>
                                <input id="right" type="radio" name="radAnswer" value="Right" />
                                <a href="#">
                                        <label for="right" class="input-group">Right</label>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            <input type="button" id="getvalue" value="getvalue">
            <input type="text" id="value" class="form-control" placeholder="Click to get the radiobox value">
        </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
.radio-button input[type="radio"]:checked + a {
  z-index: 2;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
  cursor: default;
}
.radio-button label {
  padding: 6px 12px;
  margin-bottom: 0px;
  cursor: pointer;
}
.radio-button .pagination > li > a {
  padding: 0px;
}
.radio-button input[type="radio"] {
  width: 0px;
  height: 0px;
  position: absolute;
  color: transparent;
  visibility: hidden;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
   $().ready(function() {
   $('#getvalue').click(function() {
        $('#value').val($('input:radio[name=radAnswer]:checked').val());
    });
   });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pure CSS Custom Radiobox"
Bootstrap 3.2.0 Snippet by syads321

Related: See More

Questions / Comments:

"Pure CSS Custom Radiobox" Bootstrap 3.2.0 Snippet by syads321

Related: See More

Questions / Comments:

"Pure CSS Custom Radiobox"
Bootstrap 3.2.0 Snippet by syads321