Looking to replicate the border style on an input element as shown in this image:
https://i.sstatic.net/a2iwZ.png
The current code I have is producing a different result. Can anyone assist me in achieving the desired border style?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.input-number{
width: 25px !important;
margin: 0 5px;
font-size: 25px;
border-bottom: 2px solid #000;
text-align: center;
vertical-align: bottom;
}
</style>
</head>
<body>
<div style="width:150px;padding:50px;">
<input type="text" class="input-number" value="0"/>
</div>
</body>
</html>