TA貢獻1862條經驗 獲得超6個贊
實現
說明
基本上可以分成幾個部分：
redio 本身的樣式不可修改 ， 但是因為 radio 後的 label 可以操作前面對應的 radio 而且 label 樣式是可修改的， 所以我們可以通過隱藏 radio input 本身 ， 然後修改 label 來達成自定義樣式的效果
至於左右邊分開效果，Font Awesome 有提供完整星星和半顆星的 icon，可以利用其來達成你說的半顆星效果
.rating > input:checked ~ label, // 代表每個被選中的 radio 後面的 label.rating > label:hover, // 代表每個 hover 狀態的 label.rating > label:hover ~ label { color: #FFD700; } // 代表每個 hover 狀態後面的 label.rating > input:checked + label:hover,.rating > input:checked ~ label:hover,.rating > label:hover ~ input:checked ~ label,.rating > input:checked ~ label:hover ~ label { color: #FFED85; }會覺得奇怪的是， ~ 是指 之後 的元素，那為什麼是高亮的星星是從左邊開始，其實：
.rating > label {
color: #ddd;
float: right; // <--
}float: right 後，在 Html 中前面的會變成最右邊 ， 但是 css 選擇器是看 Html 實際順序。
舉報