How to Make an Input to Take Full Width of its Parent using CSS?

If you want to make an input to take full width of its parent, you have to set its width to 100%. When we set the input’s width property to 100%, it stretches the input to take up the whole width of its parent.

Let’s say we have a text input in our HTML, which is inside a div container:

<div>
    <input type='text' placeholder='Enter your name'>
</div>

Now, we want this text input to take up the full width of its parent div container. To achieve this, we will have to first select it using the attribute selector and then set its width to 100%. That’s it:

div{
    border: 2px solid blue;
    padding: 40px 10px;
}
input[type='text']{
    width: 100%;
}

This is how the input will look like after applying the above styles:

Make input full width using CSS

Author

  • 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.