diff --git a/frontend/src/Components/Input/Input.module.scss b/frontend/src/Components/Input/Input.module.scss
index 541b45e61..edfa49a6b 100644
--- a/frontend/src/Components/Input/Input.module.scss
+++ b/frontend/src/Components/Input/Input.module.scss
@@ -2,18 +2,18 @@
 
 @import 'src/mixins';
 
-.input[type="date"],
-.input[type="datetime-local"],
-.input[type="email"],
-.input[type="month"],
-.input[type="number"],
-.input[type="password"],
-.input[type="search"],
-.input[type="tel"],
-.input[type="text"],
-.input[type="time"],
-.input[type="url"],
-.input[type="week"] {
+.date,
+.datetimeLocal,
+.email,
+.month,
+.number,
+.password,
+.search,
+.tel,
+.text,
+.time,
+.url,
+.week {
   @include rounded-lighter;
   padding: 0.75rem 1rem;
   border: 1px solid $grey-35;
@@ -44,7 +44,7 @@
 
 /* stylelint-disable no-descending-specificity */
 // Hide up and down buttons unless hover/focus
-.input[type="number"] {
+.number {
   -webkit-appearance: textfield;
 
   &:hover, &:focus {
diff --git a/frontend/src/Components/Input/Input.tsx b/frontend/src/Components/Input/Input.tsx
index 3bd48faca..c2ae5f756 100644
--- a/frontend/src/Components/Input/Input.tsx
+++ b/frontend/src/Components/Input/Input.tsx
@@ -5,6 +5,28 @@ import styles from './Input.module.scss';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return <input ref={ref} type={type} className={classNames(styles.input, className)} {...props} />;
+  const classMap: Record<string, string> = {
+    date: styles.date,
+    'datetime-local': styles.datetimeLocal,
+    email: styles.email,
+    month: styles.month,
+    number: styles.number,
+    password: styles.password,
+    search: styles.search,
+    tel: styles.tel,
+    text: styles.text,
+    time: styles.time,
+    url: styles.url,
+    week: styles.week,
+  } as const;
+
+  return (
+    <input
+      ref={ref}
+      type={type}
+      className={classNames(styles.input, type ? classMap[type] : '', className)}
+      {...props}
+    />
+  );
 });
 Input.displayName = 'Input';