html - Change the number size, of input type="number"

Question

I read a lot about changing the size, but all the options, affects the size of the input box.

I have this

input[type="number"] {
width:5rem;
font-size:100px;
}

<div class="introData">
  <label for="introData" class="label">Introducir los segundos que se mostrará cada palabra</label>
  <input type="number" name="introData" id="inputData" style="font-size: 10px;"></input>

  <button id="start" type="submit" class="btn">
    start
  </button>
</div>

question from:https://stackoverflow.com/questions/65929650/change-the-number-size-of-input-type-number

Answer 1

You have style="font-size: 10px;" as an attribute in that input tag in your HTML. Inline styles overwrite external CSS. Just erase that and it works as desired:

input[type="number"] {
width:5rem;
font-size:100px;
}

<div class="introData">
  <label for="introData" class="label">Introducir los segundos que se mostrará cada palabra</label>
  <input type="number" name="introData" id="inputData">

  <button id="start" type="submit" class="btn">
    start
  </button>
</div>