JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<fieldset>
    <input type="number">
    <input type="number">
    <input type="number">
    <input type="number">
    <input type="number">
    <input type="number">
    <input type="number">
</fieldset>

CSS

body {
    margin: 50px;
}

fieldset {  
}

input {
    padding: 3px;
    width: 15px;
    float: left;
    margin-right: 3px;
    
}

input:focus {
    width: 27px;
    outline: none;
}

input.shrink {
    width: 13px; 
}

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

JavaScript

var $inputs = $('input[type="number"]');

$inputs.focus(function() {
    $(this).siblings().addClass('shrink');
});

$inputs.blur(function() {
    $(this).siblings().removeClass('shrink');
});