diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 02be4435bf4..ffadf21a47d 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -514,3 +514,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/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 4a31934c2cd..9cbc2dc5d91 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -35256,6 +35256,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/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 06a28e8e193..7457c4e326d 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -35256,6 +35256,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;