How to hide arrows from input number in react?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to hide arrows from input number in react js with code example.

To hide arrows from input number, put the App.css class -webkit-appearance: none; to hide arrows from input number.

In this article, we will hide arrows from input number in react js just like you would create in a normal HTML project. Also, we will style it using normal CSS.

Let’s look at the following example to understand how it basically works:

APP.js

import React, { useState } from 'react';
import "./App.css"
const App = () => {

    return(
        <div>

 <input type="number" id="inputID" placeholder="Your text here" />
 
        </div>
    )
}

export default App

Filename: App.css Now, let’s edit the file named App.css to style the placeholder color.

  input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
} 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Check the output of the above code example.

React, Hide, Arrows

React, Hide, Arrows, From, Input, Number

All the best 👍

Follow me on Twitter