diff --git a/public/theme/boost/scss/moodle/forms.scss b/public/theme/boost/scss/moodle/forms.scss
index a77a483e6ed..2597fb85c9b 100644
--- a/public/theme/boost/scss/moodle/forms.scss
+++ b/public/theme/boost/scss/moodle/forms.scss
@@ -521,3 +521,14 @@ textarea[data-auto-rows] {
         }
     }
 }
+
+// Readonly inputs should have visual distinction from editable inputs.
+// Apply the same styling as disabled inputs to make them clearly readonly.
+.form-control[readonly] {
+    color: $input-disabled-color;
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
+    // Follows disabled styles in bootstrap/forms/_form-control.scss.
+    // iOS fix for unreadable content.
+    opacity: 1;
+}
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index a92d1993fd0..0865943aaf9 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -35379,6 +35379,11 @@ textarea[data-auto-rows] {
     display: none;
   }
 }
+.form-control[readonly] {
+  background-color: var(--bs-secondary-bg);
+  opacity: 1;
+}
+
 .pagelayout-login #region-main {
   border: 0;
   background-color: inherit;
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index a1f19fff7b1..20b3e171ccc 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -35379,6 +35379,11 @@ textarea[data-auto-rows] {
     display: none;
   }
 }
+.form-control[readonly] {
+  background-color: var(--bs-secondary-bg);
+  opacity: 1;
+}
+
 .pagelayout-login #region-main {
   border: 0;
   background-color: inherit;