Spin button

<div class="container">
<!-- Input -->
<input type="text" class="container__input" />
<!-- Buttons container -->
<div class="container__buttons">
<!-- Up button -->
<button class="container__button">
...
</button>
<!-- Down button -->
<button class="container__button">
...
</button>
</div>
</div>
.container {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
display: flex;
}
.container__input {
border-color: transparent;
margin-right: 4px;
padding: 4px;
width: 100px;
}
.container__buttons {
/* Content is centered vertically */
display: flex;
flex-direction: column;
justify-content: center;
}
.container__button {
border-color: transparent;
/* Make buttons have the same height */
flex: 1;
}

See also

-
+

Stepper input

99

Voting