htmlcssintel-xdkappframework

How to implement Star Rating in Intel XDK by App Framework 3.0

I am find out the way to create Star Rating from here

But when I implement by Intel App Framework 3.0 on Intel XDK, it's unable to vote. My code is:

CSS and 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>&#9734;</span>
  <input name="myrating" type="radio" value="4">
  <span>&#9734;</span>
  <input name="myrating" type="radio" value="3">
  <span>&#9734;</span>
  <input name="myrating" type="radio" value="2">
  <span>&#9734;</span>
  <input name="myrating" type="radio" value="1">
  <span>&#9734;</span>
</div>

I found in af.ui.css, input type radio would be not displayed when don't have label:

input[type="radio"],input[type="checkbox"] {display: none;}

How could I do with this?

Solution

  • You should be able to override the css rule by using a more specific one. I would suggest trying something like this:

    .class input[type="radio"] {display: inline-block}