diff --git a/vocero-frontend/src/components/ui.tsx b/vocero-frontend/src/components/ui.tsx
index e9b5432..da22460 100644
--- a/vocero-frontend/src/components/ui.tsx
+++ b/vocero-frontend/src/components/ui.tsx
@@ -50,7 +50,7 @@ export function Input({ className = "", ...props }: ComponentProps<"input">) {
   return (
     <input
       {...props}
-      className={`${inputStyles} read-only:cursor-default read-only:border-dashed read-only:text-muted ${className}`}
+      className={`${inputStyles} [&[readonly]]:cursor-default [&[readonly]]:border-dashed [&[readonly]]:text-muted ${className}`}
     />
   );
 }