如何放大输入栏？

Question

How to enlarge input number type form like the text form. The minimum and maximum number property is crucial.

 input[type=text] { width: 40%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s; outline: none; Font-size: 26px; } 

 Input number: <input type="number" name="quantity" min="1" max="5000"> <br><br> Input Form: <input type="text" name="firstname" value="This is big"> 

Answer 1

you need to use this input[type=number] to apply code to enlarge input number type

 input[type=number] { width: 40%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s; outline: none; Font-size: 26px; } 

 Input number: <input type="number" name="quantity" min="1" max="5000"> 

Answer 2

Well you could make that style to be applied to a class, bigInput for example:

.bigInput {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    font-size: 26px;
}

Then all you have to do is attach the bigInput class to all the input fields that need to have this style:

Input number:
<input type="number" name="quantity" min="1" max="5000" class="bigInput">

<br><br> Input Form:
<input type="text" name="firstname" value="This is big" class="bigInput">