如何通过 App Framework 3.0 在 Intel XDK 中实现 Star Rating

Question

我正在从here

中找到创建星级的方法

但是当我在Intel XDK上使用Intel App Framework 3.0实现时，无法投票。我的代码是：

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: "05";
    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>

我在af.ui.css中发现，输入类型单选框在没有标签时不会显示：

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

我该怎么做？

Answer 1

您应该可以使用更具体的规则来覆盖 css 规则。我建议尝试这样的事情：

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

如何通过 App Framework 3.0 在 Intel XDK 中实现 Star Rating

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

html

css

appframework

intel-xdk