how to remove increase and decrease number arrow when use input type number in form

Remove arrow when using input number.

Facing problem with increase and decrease number arrow when using input type number in form or Ajax request fields.

Use Below CSS Code

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

Explain in the example below with the CodePen link.

https://codepen.io/rajvinder-singh/pen/jOypdqB

Full Code Below

HTML

 <div class="container">
<h2>Verify Your Account</h2>
<p>We emaield you the six digit code to your email id. </p>
<p>Enter the code below to confirm your email address </p>

<div class="code-container">
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
<input type="number" class="code" placeholder="0" min="0" max="9" required>
</div>

</div>

CSS

<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{ box-sizing: border-box; }
body{ font-family: 'Poppins'; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; }
.container{ background-color: #FFF; border: 3px #000 solid ; border-radius: 10px; padding: 30px 80px; max-width: 1000px; text-align: center; text-align: center; }
.code-container{ display: flex; justify-content: center; align-content: center; margin: 40px 0; }
.code{ border-radius: 5px; font-size: 75px; height: 120px; text-align: center; width: 100px; border: 1px solid #eee; margin: 1%; }

.code::-webkit-outer-spin-button, .code::-webkit-inner-spin-button{
-webkit-appearance: none; 
margin: 0; 
}
</style>