Issue with Number Input Stepper Buttons Appearing on Different Systems

App Building
, ,
1

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:
image
on windows:
image

  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:

css

Copy code

input[type="number"]::-webkit-inner-spin-button,
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
model:
{
"number": {{ (TableExamsHistory.selectedRow === null || NewFormContoller.value === "New") ? 0 : TableExamsHistory.selectedRow['nv-l-prism-new'] }}
}

iframe:

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;" />
</div>