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>