diff --git a/languages/en-us/components/rating.yml b/languages/en-us/components/rating.yml
index d46d9318..932cbc45 100644
--- a/languages/en-us/components/rating.yml
+++ b/languages/en-us/components/rating.yml
@@ -78,6 +78,20 @@ Definitions:
                     <div class="star"></div>
                 </div>
 
+          - Title: Disabled
+            Anchor: Disabled
+            Description: 適合與「可供輸入」樣式使用，當使用者評分完之後便能停用並鎖定。這個狀態下使用者將無法與評分元件互動。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-rating is-input [[is-disabled]] is-red">
+                    <input class="heart" type="radio" name="love" value="1" />
+                    <input class="heart" type="radio" name="love" value="2" checked/>
+                    <input class="heart" type="radio" name="love" value="3" />
+                    <input class="heart" type="radio" name="love" value="4" />
+                    <input class="heart" type="radio" name="love" value="5" />
+                </div>
+
+
     - Title: Variations
       Description:
       Sections:
@@ -125,15 +139,15 @@ Definitions:
                     <div class="star"></div>
                 </div>
 
-          # - Title: 可供輸入的
-          #   Anchor: Input
-          #   Description: 可讓使用者以點擊的方式輸入評分數值。需要注意的是由於 CSS 技術問題，數值必須從大排序到小（反向排序）。
-          #   Since: 4.0.0
-          #   HTML: |
-          #       <div class="ts-rating [[is-input]] is-yellow">
-          #           <input class="star" type="radio" name="rating" value="5" />
-          #           <input class="star" type="radio" name="rating" value="4" checked/>
-          #           <input class="star" type="radio" name="rating" value="3" />
-          #           <input class="star" type="radio" name="rating" value="2" />
-          #           <input class="star" type="radio" name="rating" value="1" />
-          #       </div>
+          - Title: Input
+            Anchor: Input
+            Description: 可讓使用者以點擊的方式輸入評分數值。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-rating [[is-input]] is-yellow">
+                    <input class="star" type="radio" name="rating" value="1" />
+                    <input class="star" type="radio" name="rating" value="2" checked/>
+                    <input class="star" type="radio" name="rating" value="3" />
+                    <input class="star" type="radio" name="rating" value="4" />
+                    <input class="star" type="radio" name="rating" value="5" />
+                </div>
diff --git a/languages/zh-tw/components/rating.yml b/languages/zh-tw/components/rating.yml
index d56e2298..943130be 100644
--- a/languages/zh-tw/components/rating.yml
+++ b/languages/zh-tw/components/rating.yml
@@ -78,6 +78,19 @@ Definitions:
                     <div class="star"></div>
                 </div>
 
+          - Title: 停用的
+            Anchor: Disabled
+            Description: 適合與「可供輸入」樣式使用，當使用者評分完之後便能停用並鎖定。這個狀態下使用者將無法與評分元件互動。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-rating is-input [[is-disabled]] is-red">
+                    <input class="heart" type="radio" name="love" value="1" />
+                    <input class="heart" type="radio" name="love" value="2" checked/>
+                    <input class="heart" type="radio" name="love" value="3" />
+                    <input class="heart" type="radio" name="love" value="4" />
+                    <input class="heart" type="radio" name="love" value="5" />
+                </div>
+
     - Title: 外觀
       Description:
       Sections:
@@ -125,15 +138,15 @@ Definitions:
                     <div class="star"></div>
                 </div>
 
-          # - Title: 可供輸入的
-          #   Anchor: Input
-          #   Description: 可讓使用者以點擊的方式輸入評分數值。需要注意的是由於 CSS 技術問題，數值必須從大排序到小（反向排序）。
-          #   Since: 4.0.0
-          #   HTML: |
-          #       <div class="ts-rating [[is-input]] is-yellow">
-          #           <input class="star" type="radio" name="rating" value="5" />
-          #           <input class="star" type="radio" name="rating" value="4" checked/>
-          #           <input class="star" type="radio" name="rating" value="3" />
-          #           <input class="star" type="radio" name="rating" value="2" />
-          #           <input class="star" type="radio" name="rating" value="1" />
-          #       </div>
+          - Title: 可供輸入的
+            Anchor: Input
+            Description: 可讓使用者以點擊的方式輸入評分數值。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-rating [[is-input]] is-yellow">
+                    <input class="star" type="radio" name="rating" value="1" />
+                    <input class="star" type="radio" name="rating" value="2" checked/>
+                    <input class="star" type="radio" name="rating" value="3" />
+                    <input class="star" type="radio" name="rating" value="4" />
+                    <input class="star" type="radio" name="rating" value="5" />
+                </div>
diff --git a/src/rating.css b/src/rating.css
index 79fb8327..d612b093 100644
--- a/src/rating.css
+++ b/src/rating.css
@@ -24,24 +24,24 @@
 .ts-rating :is(.star, .heart).is-active,
 .ts-rating.is-input :is(.star, .heart):checked,
 .ts-rating.is-input :is(.star, .heart):hover,
-.ts-rating.is-input :is(.star, .heart):hover ~ :is(.star, .heart),
-.ts-rating.is-input :is(.star, .heart):checked ~ :is(.star, .heart) {
+.ts-rating.is-input :is(.star, .heart):has(~ :is(.star, .heart):hover),
+.ts-rating.is-input :is(.star, .heart):has(~ :is(.star, .heart):checked) {
     color: inherit;
 }
 
 .ts-rating.is-yellow :is(.star, .heart).is-active,
 .ts-rating.is-yellow.is-input :is(.star, .heart):checked,
 .ts-rating.is-yellow.is-input :is(.star, .heart):hover,
-.ts-rating.is-yellow.is-input :is(.star, .heart):hover ~ :is(.star, .heart),
-.ts-rating.is-yellow.is-input :is(.star, .heart):checked ~ :is(.star, .heart) {
+.ts-rating.is-yellow.is-input :is(.star, .heart):has(~ :is(.star, .heart):hover),
+.ts-rating.is-yellow.is-input :is(.star, .heart):has(~ :is(.star, .heart):checked) {
     color: #e3c81b;
 }
 
 .ts-rating.is-red :is(.star, .heart).is-active,
 .ts-rating.is-red.is-input :is(.star, .heart):checked,
 .ts-rating.is-red.is-input :is(.star, .heart):hover,
-.ts-rating.is-red.is-input :is(.star, .heart):hover ~ :is(.star, .heart),
-.ts-rating.is-red.is-input :is(.star, .heart):checked ~ :is(.star, .heart) {
+.ts-rating.is-red.is-input :is(.star, .heart):has(~ :is(.star, .heart):hover),
+.ts-rating.is-red.is-input :is(.star, .heart):has(~ :is(.star, .heart):checked) {
     color: #ff1100;
 }
 
@@ -100,13 +100,17 @@
 }
 
 /**
- * Input
+ * Disabled
  */
 
-.ts-rating.is-input {
-    flex-direction: row-reverse;
+.ts-rating.is-disabled {
+    pointer-events: none;
 }
 
+/**
+ * Input
+ */
+
 .ts-rating.is-input input {
     appearance: none;
     margin: 0;
@@ -115,8 +119,9 @@
     transition: color 0.1s ease, opacity 0.1s ease;
 }
 
-.ts-rating.is-input input:hover:not(:focus) ~ input {
-    opacity: 0.8;
+.ts-rating.is-input input:hover:not(:focus) ~ input,
+.ts-rating.is-input input:hover:focus~input {
+    opacity: 0.7;
 }
 
 .ts-rating.is-input input:hover:not(:focus) {