Box resizing when I add min and max

HTML-CSS
1

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>
   <div class="input-burger"> 
     <input type="number"  min="1" max="125">
    </div>

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?

2

Hello!

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

input[type="number"]{
  width: //what you want
}
1 Like