html - How to implement Star Rating in Intel XDK by App Framework 3.0 -
i find out way create star rating here
but when implement intel app framework 3.0 on intel xdk, it's unable vote. code is:
css , html:
.rating { unicode-bidi: bidi-override; direction: rtl; text-align: center; font-size: 30px; } .rating > span { display: inline-block; position: relative; width: 1.1em; } .rating > span:hover, .rating > span:hover ~ span, .rating:not(:hover) > input:checked ~ span { color: transparent; } .rating > span:hover:before, .rating > span:hover ~ span:before, .rating:not(:hover) > input:checked ~ span:before { content: "\2605"; position: absolute; left: 0; color: gold; } .rating > input { margin-left: -2.8em; margin-right: 0; top: 3px; width: 2.1em; height: 2.1em; position: relative; z-index: 2; opacity: 0; }
<div class="rating"> <input name="myrating" type="radio" value="5"> <span>☆</span> <input name="myrating" type="radio" value="4"> <span>☆</span> <input name="myrating" type="radio" value="3"> <span>☆</span> <input name="myrating" type="radio" value="2"> <span>☆</span> <input name="myrating" type="radio" value="1"> <span>☆</span> </div>
i found in af.ui.css, input type radio not displayed when don't have label:
input[type="radio"],input[type="checkbox"] {display: none;}
how this?
you should able override css rule using more specific one. suggest trying this:
.class input[type="radio"] {display: inline-block}
Comments
Post a Comment