Input number webkit spin buttons visible on focus only

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
<div>
    <input type="number"  name="a" value="123456">  
</div>
  <div>
  <input type="number" name="b" value="123456" class="numberfocus"  >  
    </div>
    
  </body>

</html>

/* Styles go here */

input.numberfocus {
  border: 0;
}
input.numberfocus::-webkit-outer-spin-button, input.numberfocus::-webkit-inner-spin-button {
  -webkit-appearance: none;
  border: 0;
}
input.numberfocus:focus::-webkit-outer-spin-button {
  -webkit-appearance: outer-spin-button;
}
input.numberfocus:focus::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
}