Box resizing when I add min and max

Hello guys, I’m creating a form for a project and everything looks fine for now, my only problem is that a text-box I created for the age changes in when I add min and max attributes. This is how my code looks:

<div class="row-tab">
    <div class="label-burger">
    <label> * Age:</label>
   <div class="input-burger"> 
     <input type="number"  min="1" max="125">

And my CSS:

.label-burger {
  display: inline-block;
  width: 40%;
  text-align: right;

.input-burger {
  display: inline-block;
  text-align: left;
  width: 48%

I have other text-boxes that literally have the same formatting and everything else is the same apart from the ‘min and max’ attributes. Does anyone know why this happens?


I don’t know why that happens , but you can solve it by targetting the input type box specifically like

  width: //what you want
1 Like