Bootstrap Snippet Rating Numeric widget using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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">
        <div class="rating" align="center">
                  <input type="radio" id="star10" name="rating" value="10" />
                  <label class="good border" for="star10" title="Rocks!" >10</label>
                  <input type="radio" id="star9" name="rating" value="9" />
                  <label class="good border" for="star9" title="Rocks!">9</label>
                  <input type="radio" id="star8" name="rating" value="8" />
                  <label class="bad border" for="star8" title="Pretty good">8</label>
                  <input type="radio" id="star7" name="rating" value="7" />
                  <label class="bad border" for="star7" title="Pretty good">7</label>
                  <input type="radio" id="star6" name="rating" value="6" />
                  <label class="bad border" for="star6" title="Meh">6</label>
                  <input type="radio" id="star5" name="rating" value="5" />
                  <label class="verybad border" for="star5" title="Meh">5</label>
                  <input type="radio" id="star4" name="rating" value="4" />
                  <label class="verybad border" for="star4" title="Kinda bad">4</label>
                  <input type="radio" id="star3" name="rating" value="3" />
                  <label class="verybad border" for="star3" title="Kinda bad">3</label>
                  <input type="radio" id="star2" name="rating" value="2" />
                  <label class="verybad border" for="star2" title="Sucks big tim">2</label>
                  <input type="radio" id="star1" name="rating" value="1" />
                  <label class="verybad border" for="star1" title="Sucks big time">1</label>
                </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
                .rating {
                    float: left;
                  }
                  .rating:not(:checked)>input {
                    position: absolute;
                    top: -9999px;
                  }
                  .rating:not(:checked)>label {
                    float: right;
                    width: 1em;
                    cursor: pointer;
                    font-size: 150%;
                    color: #ddd;
                  }
                  .rating>input:checked~label.good {
                    color: rgb(71, 163, 43);
                  }
                  .rating:not(:checked)>label.good:hover,
                  .rating:not(:checked)>label:hover~label.good {
                    color: rgb(71, 163, 43);
                  }
                  .rating>input:checked~label.bad {
                    color: rgb(255, 158, 30);
                  }
                  .rating:not(:checked)>label.bad:hover,
                  .rating:not(:checked)>label:hover~label.bad {
                    color: rgb(255, 158, 30);
                  }
                  .rating>input:checked~label.verybad {
                    color: rgb(247, 19, 19);
                  }
                  .rating:not(:checked)>label.verybad:hover,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Rating Numeric widget "
Bootstrap 4.0.0 Snippet by pritraj

Related: See More

Questions / Comments:

"Rating Numeric widget " Bootstrap 4.0.0 Snippet by pritraj

Related: See More

Questions / Comments:

"Rating Numeric widget "
Bootstrap 4.0.0 Snippet by pritraj