CSS- Star Rating Input using CSS and HTML

Example:

HTML:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
Rating:
  <span class="starRating">
 <input id="rating5" name="rating" type="radio" value="5">
 <label for="rating5">5</label>
 <input id="rating4" name="rating" type="radio" value="4">
 <label for="rating4">4</label>
 <input checked="" id="rating3" name="rating" type="radio" value="3">
 <label for="rating3">3</label>
 <input id="rating2" name="rating" type="radio" value="2">
 <label for="rating2">2</label>
 <input id="rating1" name="rating" type="radio" value="1">
 <label for="rating1">1</label>
  </span>
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
32
33
34
35
36
37
.starRating:not(old){
  display        : inline-block;
  width          : 7.5em;
  height         : 1.5em;
  overflow       : hidden;
  vertical-align : bottom;
}
 
.starRating:not(old) > input{
  margin-right : -100%;
  opacity      : 0;
}
 
.starRating:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.png');
  background-size : contain;
}
 
.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.5em;
  height          : 1.5em;
  background      : url('star-on.png');
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}
 
.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}
Note: Make sure that two images 'star-off.png' and 'star-on.png'  are existing, which you are using in CSS .
No comments:
Labels:

jQuery- How can we do multiple drop-down values auto suggestions?

Question: How can we do multiple drop-down values Auto suggestions?
Answer: We can do this using below codes using choosen libraries. We can test the code putting in a single html file test.html
Code 1: Include jQuery/CSS libraries
Code 2: jQuery script
?
1
2
3
$(function() {
    $(".choosen-select").chosen();
});
Code 3: HTML
?
1
2
3
4
5
6
<select class="choosen-select" multiple="true" name="faculty" style="width: 200px;">
        <option value="AC">A</option>
        <option value="AD">B</option>
        <option value="AM">C</option>
        <option value="AP">D</option>
</select>
Output
No comments:

jQuery/HTML- Count characters in textarea

Topic: 1.Character Counting Remaining on textarea using jQuery.

Topic: 2. jQuery- Count characters in textarea

Topic: 3. How can I count characters in textarea on onkeyup() event using jQuery?

Solution:

We can find above topics solutions in below code.

STEP 1: Include jQuery

STEP 2: Script

?
1
2
3
4
5
6
7
8
function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(500 - len);
        }
};

STEP 3: HTML

?
1
2
<textarea id="field" onkeyup="countChar(this)"></textarea><br>
<b>Remaining limit:</b><span id="charNum">500</span> characters
No comments:
Subscribe to: Posts (Atom)