How to Make an Input Box Bigger using CSS?

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:

    font-size: 24px;

This is how the input box will look like after adding to above CSS code to the input box:

Make an Input Box Bigger using CSS font-size property

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:

    padding: 10px;

Here is an image of the input box after applying padding:

Make an Input Box Bigger using CSS padding property

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:

    height: 40px;


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts