diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index 13902d1c2..f30187a2a 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -240,7 +240,8 @@ input[type='range']::-moz-range-track {
/* Size modifiers */
-.small {
+.small,
+.select.small {
font-size: var(--font-size-small);
height: 34px;
padding: calc(var(--spacer) / 4);
@@ -256,9 +257,32 @@ input[type='range']::-moz-range-track {
font-size: var(--font-size-mini);
}
-.selectSmall {
- composes: small;
- height: 34px;
+.select.small {
+ padding-right: 2rem;
+
+ /* custom arrow */
+ background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0;
+ background-size: 5px 5px, 5px 5px, 2rem 3rem;
+}
+
+.large,
+.select.large {
+ font-size: var(--font-size-large);
+ height: 62px;
+ padding: calc(var(--spacer) / 1.5);
+}
+
+.large::placeholder {
+ font-size: var(--font-size-large);
+}
+
+.prefix.large,
+.postfix.large {
+ height: 62px;
+ font-size: var(--font-size-base);
+}
+
+.select.large {
padding-right: 2rem;
/* custom arrow */
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 375318abc..f44a185f1 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -5,16 +5,19 @@ import { InputProps } from '.'
import FilesInput from '../../molecules/FormFields/FilesInput'
import Terms from '../../molecules/FormFields/Terms'
import Datatoken from '../../molecules/FormFields/Datatoken'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
const DefaultInput = ({
- small,
+ size,
prefix,
postfix,
additionalComponent,
...props
}: InputProps) => (
@@ -26,7 +29,7 @@ export default function InputElement({
name,
prefix,
postfix,
- small,
+ size,
field,
label,
help,
@@ -34,14 +37,12 @@ export default function InputElement({
additionalComponent,
...props
}: InputProps): ReactElement {
+ const styleClasses = cx({ select: true, [size]: size })
+
switch (type) {
case 'select':
return (
-