diff --git a/src/assets/scss/_input-text.scss b/src/assets/scss/_input-text.scss index 5f1ba198..a463b536 100644 --- a/src/assets/scss/_input-text.scss +++ b/src/assets/scss/_input-text.scss @@ -17,6 +17,14 @@ &.hasIconVisibility { @apply pr-8; } + + &.no-arrows[type='number'] { + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + } } .icon { diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue index 00b0084a..2b56a983 100644 --- a/src/components/Input/Input.vue +++ b/src/components/Input/Input.vue @@ -18,6 +18,7 @@ 'is-icon': $slots['icon'], search: inputType === 'search', hasIconVisibility: controlVisibility, + 'no-arrows': noArrows, }" data-testid="input" :disabled="disabled" @@ -164,6 +165,14 @@ export default { type: Boolean, default: false, }, + + /** Remove arrows of input number + https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button#changing_the_cursor_in_the_spin_controls + **/ + noArrows: { + type: Boolean, + default: false, + }, }, data: (instance) => ({