CSS- Star Rating Input using CSS and HTML

Example:

HTML:

Rating:
  
 
 5
 
 4
 
 3
 
 2
 
 1
  

CSS:

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

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

$(function() {
    $(".choosen-select").chosen();
});

Code 3: HTML

        A
        B
        C
        D

Output

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

 
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

 
 

 Remaining limit:500 characters