diff --git a/js/src/rating.js b/js/src/rating.js
index 2929a9eb1..1923912e6 100644
--- a/js/src/rating.js
+++ b/js/src/rating.js
@@ -41,6 +41,7 @@ const CLASS_NAME_RATING_ITEM_CUSTOM_ICON = 'rating-item-custom-icon'
 const CLASS_NAME_RATING_ITEM_CUSTOM_ICON_ACTIVE = 'rating-item-custom-icon-active'
 const CLASS_NAME_RATING_ITEM_INPUT = 'rating-item-input'
 const CLASS_NAME_RATING_ITEM_LABEL = 'rating-item-label'
+const CLASS_NAME_READONLY = 'readonly'
 
 const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="rating"]'
 const SELECTOR_RATING_ITEM_INPUT = '.rating-item-input'
@@ -355,6 +356,10 @@ class Rating extends BaseComponent {
       this._element.classList.add(CLASS_NAME_DISABLED)
     }
 
+    if (this._config.readOnly) {
+      this._element.classList.add(CLASS_NAME_READONLY)
+    }
+
     this._element.setAttribute('role', 'radiogroup')
     Array.from({ length: this._config.itemCount }, (_, index) => this._createRatingItem(index))
   }
diff --git a/scss/_rating.scss b/scss/_rating.scss
index d05676a14..6d9b06033 100644
--- a/scss/_rating.scss
+++ b/scss/_rating.scss
@@ -17,12 +17,13 @@
   }
 
   &:not(.disabled):not(.readonly) {
-    .rating-item {
-      cursor: pointer;
+    .rating-item:hover {
+      transform: var(--#{$prefix}rating-item-scale-transform);
+    }
 
-      &:hover {
-        transform: var(--#{$prefix}rating-item-scale-transform);
-      }
+    .rating-item-icon,
+    .rating-item-label {
+      cursor: pointer;
     }
   }
 }
@@ -47,7 +48,6 @@
   font-size: var(--#{$prefix}rating-item-height);
   line-height: 0;
   color: var(--#{$prefix}rating-item-color);
-  cursor: pointer;
 
   * {
     pointer-events: none;
@@ -83,7 +83,6 @@
 .rating-item-icon {
   width: var(--#{$prefix}rating-item-height);
   height: var(--#{$prefix}rating-item-height);
-  cursor: pointer;
   background-color: var(--#{$prefix}rating-item-color);
   mask: var(--#{$prefix}rating-item-icon) center / var(--#{$prefix}rating-item-height) no-repeat;
 }