css: hide number input arrows

Signed-off-by: Varun Patil <radialapps@gmail.com>
2023-10-31 10:06:51 -07:00 · 2023-10-31 10:06:51 -07:00 · 2d75709ab7
parent 8514120fff
commit 2d75709ab7
1 changed files with 12 additions and 0 deletions
--- a/src/styles/utils.scss
+++ b/src/styles/utils.scss
@ -35,3 +35,15 @@
  user-select: none;
  -webkit-user-select: none; // iOS Safari is a horrible browser
 }
+
+// Hide arrows on number input
+input[type='number'] {
+  appearance: textfield;
+
+  // https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}