The easiest way to make an input box bigger in CSS is to use the font-size property. The input size is directly related to the font-size of the text that it contains.
If the font-size is higher, the input box will become bigger and if the font-size is lower, the input box will automatically become smaller.
Let’s say we have the following input box in our HTML file:
<input type='text' placeholder='Enter your name'>
To make this input box bigger, we can increase its font size to some higher value for eg. 24px:
input[type='text']{
font-size: 24px;
}
This is how the input box will look like after adding to above CSS code to the input box:
Method 2: Using padding Property
You can also specify some extra padding to make the input box bigger. But this will only change the dimensions of the input box. The input text size will remain normal:
input[type='text']{
padding: 10px;
}
Here is an image of the input box after applying padding:
Using height Property
The third approach is to increase the height of the input box using the height property. You just have to set the height to some higher values for eg. 40px or something higher:
input[type='text']{
height: 40px;
}
