Issue with Number Input Stepper Buttons Appearing on Different Systems

I'm encountering a persistent issue with the number input stepper buttons in a custom component on Retool. Despite implementing CSS to hide these stepper buttons, they still appear on some systems but not on others. I'm seeking guidance or potential fixes for this behavior.
i created a costum component for number input so that the arrows will step in steps of 0.25
Details of the Issue:
on my mac:
on windows:

  1. Environment:
  • Both systems are using Google Chrome, but on different operating systems
  • The component involves a number input field where I’ve tried to hide the stepper buttons using CSS.
  1. Current Implementation:
  • The input field is defined within an iframe in an HTML structure, with the following CSS aimed at hiding the stepper buttons:


Copy code

input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  • JavaScript is used for debouncing input changes and updating the Retool model accordingly.
  1. Observed Behavior:
  • On my computer, the stepper buttons are successfully hidden.
  • On another computer, the stepper buttons still appear next to the number input field despite the same browser version.
  1. Attempted Solutions:
  • Verified and ensured both systems are running the same version of Chrome.
  • Applied more specific CSS selectors and used !important to ensure styles are not overridden.
  • Checked for any external stylesheets or scripts that might be affecting the styling.

I am looking for any advice on why this issue might be occurring and how to ensure a consistent user experience across all systems. Could this be related to how different operating systems render Chrome elements, or is there a potential oversight in my CSS/JavaScript implementation?

Any insights or suggestions would be greatly appreciated!

Thank you!

here is the full code of the component
"number": {{ (TableExamsHistory.selectedRow === null || NewFormContoller.value === "New") ? 0 : TableExamsHistory.selectedRow['nv-l-prism-new'] }}


html, body { margin: 0; padding: 0; height: 100%; width: 100%; } #stepper { display: flex; align-items: center; height: 100%; width: 100%; justify-content: center; } input[type="number"] { background-color: #d7f2d3; width: 100%; height: 100%; border: 1px solid #000000; padding: 0; margin: 0; font-size: 14px; -moz-appearance: textfield; /* Hide spinner in Firefox */ -webkit-appearance: none; /* Hide spinner in Chrome, Safari, Edge, and Opera */ border-radius: 5px; /* Rounded corners */ } /* Hide spinner in Chrome, Safari, Edge, and Opera */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
<div id="stepper">
  <input id="numberInput" type="number" step="0.25" oninput="handleInputChange(event)" style="text-align: center;" />

Hey @jojo!

I appreciate the time and effort you put into this question. Can I suggest also asking this in Discord? We have a great community there as well.

Try verifying your selector works in production by using inspect and adding styling through Google Chrome tools. Inspect on the device it is not working on and compare.