0

Stuck in half star rating problem CSS. I take a reference from http://codepen.io/mrk1989/pen/mLeHJ

my Html structure for Star showing is like that

<ul class="rateChange">
  <li>
    <input type="radio" id="rating10" name="rating" value="10" />
    <label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" />
    <label class="half" for="rating9" title="4 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating8" name="rating" value="8" />
    <label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" />
    <label class="half" for="rating7" title="3 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating6" name="rating" value="6" />
    <label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" />
    <label class="half" for="rating5" title="2 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating4" name="rating" value="4" />
    <label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" />
    <label class="half" for="rating3" title="1 1/2 stars"></label>
  </li>
  <li>
    <input type="radio" id="rating2" name="rating" value="2" />
    <label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" />
    <label class="half" for="rating1" title="1/2 star"></label>
  </li>
</ul>

and in my case stars come under ul li tag and how I can change my css to get all css functionality which is given in above link ( like on click all previous and current star is ON and on hover all star previous and current start show hovering effect).

This is jsfiddle link in which I am doing something https://jsfiddle.net/ae0ypksv/ not acheiving full functionality.

Help is really appreciated..!! thanks

Kinny
  • 47
  • 1
  • 1
  • 10
  • 1
    You have all the code, what more do you want? – Evan Trimboli Jul 01 '16 at 05:25
  • @Evan Trimboli yes I have a code, problem is, the stars is generating through ng-repeat and I tried a lot to adjust css but I am not so good in css to adjust according this. – Kinny Jul 01 '16 at 06:45

2 Answers2

1

You have to put all your input/label inside one <li> like this 

<h1>Half Star Rating Change Senirow</h1>

<ul class="rateChange">
  <li>
    <input type="radio" id="rating10" name="rating" value="10" />
    <label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" />
    <label class="half" for="rating9" title="4 1/2 stars"></label>

    <input type="radio" id="rating8" name="rating" value="8" />
    <label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" />
    <label class="half" for="rating7" title="3 1/2 stars"></label>

    <input type="radio" id="rating6" name="rating" value="6" />
    <label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" />
    <label class="half" for="rating5" title="2 1/2 stars"></label>

    <input type="radio" id="rating4" name="rating" value="4" />
    <label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" />
    <label class="half" for="rating3" title="1 1/2 stars"></label>

    <input type="radio" id="rating2" name="rating" value="2" />
    <label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" />
    <label class="half" for="rating1" title="1/2 star"></label>
  </li>
</ul>
Magisch
  • 7,312
  • 9
  • 36
  • 52
Amit Jamwal
  • 629
  • 1
  • 6
  • 16
  • the stars ( Input and label) is generating through ng-repeat i.e. based on what user passed. So all input and label is come under li so how can I used css sudeo class to achieve this functionality. – Kinny Jul 01 '16 at 06:41
0

This the solution i have solved it just check it...

body {
    margin: 5%; 
    text-align: center;
    background:  aliceblue;
    color:  darkred; 
}
h1 {
    font-size: 2em; 
    margin-bottom: .5rem;
}

/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 50px;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
    content: '\2605'; /* full star */
}

/* Zero stars rating */
.rate > label:last-child:before {
    content: '\2605' ; /* empty star outline */
}

input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #73B100;  } /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D;  } 
<html>
<head>
<title>Rating</title>
<link type="text/css" href="style.css" rel="stylesheet">

</head>
<body>
<h1>Star Rating By Md.Sabbirul Islam</h1>


<fieldset class="rate">
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label>
    
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label>

    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label>

    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label>

    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label>

    <input type="radio" id="rating0" name="rating" value="0" /><label for="rating0" title="No star"></label>
</fieldset>
</body>
</html>
Coder Sabbirul
  • 16
  • 3
  • hi... this is working already @MD . Sabbirul Islam, check my jsfiddle [ https://jsfiddle.net/ae0ypksv/] ( https://jsfiddle.net/ae0ypksv/) all inputs and label comes under li tag. How I wrote my CSS for this scenario. – Kinny Jul 01 '16 at 09:20