diff --git a/src/components-examples/aria/autocomplete/autocomplete.css b/src/components-examples/aria/autocomplete/autocomplete.css
index ffa2d0bb763c..f76b595df316 100644
--- a/src/components-examples/aria/autocomplete/autocomplete.css
+++ b/src/components-examples/aria/autocomplete/autocomplete.css
@@ -5,6 +5,36 @@
 
   /* stylelint-disable-next-line material/no-prefixes -- Valid in all remotely recent browsers. */
   width: fit-content;
+
+  /* The ::placeholder selectors are intentionally separated.
+  The 'material/no-prefixes' stylelint rule flags the standard ::placeholder
+  when grouped with vendor prefixes. Each prefix is on its own rule to comply.
+  Vendor prefixes are included to ensure consistent placeholder styling
+  across different browsers.
+
+  NOTE: These styles are primarily needed for internal testing. */
+
+  /* stylelint-disable material/no-prefixes -- Provides all prefixes for ::placeholder */
+  input::-webkit-input-placeholder {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input::-moz-placeholder /* Firefox 19+ */ {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input:-ms-input-placeholder /* IE 10+ */ {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input:-moz-placeholder  /* Firefox 18- */ {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  input::placeholder {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
 }
 
 .example-search-icon,
@@ -116,12 +146,3 @@ input[ngCombobox]:disabled {
   font-size: 0.9rem;
 }
 
-/* stylelint-disable material/no-prefixes -- Provides all prefixes for ::placeholder */
-input::-webkit-input-placeholder,
-input::-moz-placeholder, /* Firefox 19+ */
-input:-ms-input-placeholder, /* IE 10+ */
-input:-moz-placeholder, /* Firefox 18- */
-input::placeholder {
-  color: var(--mat-sys-on-surface-variant);
-}
-/* stylelint-enable material/no-prefixes */