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:
