我使用的星级纯CSS。 我怎样才能违约评级的价值？(I use pure css for sta

该评级系统工作正常，并在所有不使用JS。 我在数据库中存储的评级。

如果我想改变的评级，从数据库中检索的评价，哪些修改CSS我应该表现出存储的评价？

例如，我评为四星级以前的东西。 当我点击编辑页面，我可以看到它是由4星评级，仍然我可以将其更改为1星或5星。

 .star-rating { font-size: 0; white-space: nowrap; display: inline-block; width: 150px; height: 30px; overflow: hidden; position: relative; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; } .star-rating i { opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 20%; z-index: 1; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; } .star-rating input { -moz-appearance: none; -webkit-appearance: none; opacity: 0; display: inline-block; width: 20%; height: 100%; margin: 0; padding: 0; z-index: 2; position: relative; } .star-rating input:hover + i, .star-rating input:checked + i { opacity: 1; } .star-rating i ~ i { width: 40%; } .star-rating i ~ i ~ i { width: 60%; } .star-rating i ~ i ~ i ~ i { width: 80%; } .star-rating i ~ i ~ i ~ i ~ i { width: 100%; } ::after, ::before { height: 100%; padding: 0; margin: 0; box-sizing: border-box; text-align: center; vertical-align: middle; } 

 <span class="star-rating col-sm-10"> <input type="radio" name="rating" value="1"><i></i> <input type="radio" name="rating" value="2"><i></i> <input type="radio" name="rating" value="3"><i></i> <input type="radio" name="rating" value="4"><i></i> <input type="radio" name="rating" value="5"><i></i> </span> 

Answer 1:

添加checked属性所需input ：

<span class="star-rating col-sm-10">
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3" checked><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>

您还需要添加这个CSS

.star-rating input:hover ~ input:checked + i {
  opacity: 0;
}

 .star-rating { font-size: 0; white-space: nowrap; display: inline-block; width: 150px; height: 30px; overflow: hidden; position: relative; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; } .star-rating i { opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 20%; z-index: 1; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; } .star-rating input { -moz-appearance: none; -webkit-appearance: none; opacity: 0; display: inline-block; width: 20%; height: 100%; margin: 0; padding: 0; z-index: 2; position: relative; } .star-rating input:hover ~ input:checked + i { opacity: 0; } .star-rating input:hover + i, .star-rating input:checked + i { opacity: 1; } .star-rating i ~ i { width: 40%; } .star-rating i ~ i ~ i { width: 60%; } .star-rating i ~ i ~ i ~ i { width: 80%; } .star-rating i ~ i ~ i ~ i ~ i { width: 100%; } ::after, ::before { height: 100%; padding: 0; margin: 0; box-sizing: border-box; text-align: center; vertical-align: middle; } 

 <span class="star-rating col-sm-10"> <input type="radio" name="rating" value="1"><i></i> <input type="radio" name="rating" value="2"><i></i> <input type="radio" name="rating" value="3" checked><i></i> <input type="radio" name="rating" value="4"><i></i> <input type="radio" name="rating" value="5"><i></i> </span> 

或者，取代

.star-rating:hover input:checked + i

同

.star-rating:not(:hover) input:checked + i

 .star-rating { font-size: 0; white-space: nowrap; display: inline-block; width: 150px; height: 30px; overflow: hidden; position: relative; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; } .star-rating i { opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 20%; z-index: 1; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; } .star-rating input { -moz-appearance: none; -webkit-appearance: none; opacity: 0; display: inline-block; width: 20%; height: 100%; margin: 0; padding: 0; z-index: 2; position: relative; } .star-rating input:hover + i, .star-rating:not(:hover) input:checked + i { opacity: 1; } .star-rating i ~ i { width: 40%; } .star-rating i ~ i ~ i { width: 60%; } .star-rating i ~ i ~ i ~ i { width: 80%; } .star-rating i ~ i ~ i ~ i ~ i { width: 100%; } ::after, ::before { height: 100%; padding: 0; margin: 0; box-sizing: border-box; text-align: center; vertical-align: middle; } 

 <span class="star-rating col-sm-10"> <input type="radio" name="rating" value="1"><i></i> <input type="radio" name="rating" value="2"><i></i> <input type="radio" name="rating" value="3" checked><i></i> <input type="radio" name="rating" value="4"><i></i> <input type="radio" name="rating" value="5"><i></i> </span> 

Answer 2:

设置checked使用服务器端脚本4日（或两者）选项属性：

<span class="star-rating col-sm-10">
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4" checked><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>

文章来源: I use pure css for star rating. How can I default rating value?