From 84ee0d9523184892f6b728161575cd4ed60976e0 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 24 Oct 2024 16:29:35 -0400 Subject: [PATCH] Remove spin buttons on number input fields in Firefox (fixes #103). (#104) --- src/components/MenuBar/PageNumInput.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/MenuBar/PageNumInput.css b/src/components/MenuBar/PageNumInput.css index d6411416..204bbbc4 100644 --- a/src/components/MenuBar/PageNumInput.css +++ b/src/components/MenuBar/PageNumInput.css @@ -4,12 +4,19 @@ white-space: nowrap; } -.page-num-input input::-webkit-outer-spin-button, -.page-num-input input::-webkit-inner-spin-button { +/* Remove the spin buttons (up/down arrows) on number input fields for WebKit-based browsers. + NOTE: This approach does not work for Firefox Browser. See the next rule for mitigation. */ +.page-num-input input[type="number"]::-webkit-outer-spin-button, +.page-num-input input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; } +/* Show number input fields as `textfield` to remove the spin buttons for Firefox Browser. */ +.page-num-input input[type="number"] { + appearance: textfield; +} + .page-num-input-num-pages-text { font-size: inherit !important; }