Input width 100% filled

Question

How to make textarea / input, which has a 10px right and right padding and will be as wide as its parent.

textarea,input{ padding:5px 10px 5px 10px; width:100%; } 

In this case, the input is wider.

Answer 1

  textarea{ box-sizing: border-box; width:100%; padding: 10px } 

Answer 2

Ah, the old box model . Filling is ADDED in width, so to achieve the desired effect you will also have to use percentages in the addition. Try the following:

 textarea, input { padding: 1% 2% 1% 2%; width: 96%; } 

Answer 3

You can check my answer in a related question

Demo on jsFiddle :

HTML markup:

 <div class="input_wrap"> <input type="text" /> </div> 

CSS

 div { padding: 6px 10px; /* equal to negative input margin for mimic normal `div` box-sizing */ } input { width: 100%; /* force to expand to container width */ padding: 5px 10px; border: none; margin: 0 -10px; /* negative margin = border-width + horizontal padding */ } 

Answer 4

Add the margin property to the css code.