Cannot hide input spin buttons on Windows/Chrome
See original GitHub issueI am using react-select
in my project and trying to hide the input spin buttons that appear on the google chrome (windows).
Tried to add the following styles but it didn’t work.
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
Please let me know how to hide those spin buttons. Thanks in advance.
Issue Analytics
- State:
- Created 3 years ago
- Comments:8
Top Results From Across the Web
Can I hide the HTML5 number input's spin box? - Stack Overflow
This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):.
Read more >How to Hide the HTML5 Number Input's Arrow Buttons - W3docs
In this tutorial, you will read and learn several methods that are used to hide HTML5 arrow buttons from the number input with...
Read more >How to hide number input spin box using CSS - GeeksforGeeks
To remove input's spin box, the -webkit-appearance property on the ::-webkit-outer-spin-button,
Read more >Turn Off Number Input Spinners - CSS-Tricks
WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:
Read more >Chromebook keyboard shortcuts - Google Support
System and display settings ; Display hidden files in the Files app, Ctrl + . (full stop) ; Open the status area (where...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The component uses a
<input type="text">
by default. Having the spinners would mean that the input’stype
attribute has been changed tonumber
.If you are not required to use a number input, try changing the attribute to
type="text"
.@ThunderBoltEngineer Unfortunately, there have been no provided code samples or sandboxes. We will be closing this to focus on remaining react-select issues as this does not appear to be an issue with the library itself. If you wish to provide a codesandbox demonstrating the behavior, someone we may able to provide more direction on next steps and we can re-open this issue if necessary.