100% width input with padding

Question

How to make textarea/input that has left/right padding 10px and will be as wide as its parent.

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

In that case input is wider.

A good discussion about solving this with box-sizing is available here: http://css-tricks.com/box-sizing/ (This is the solution Meliborn suggests, note what browsers it is compatible with. It's at the bottom of the article) — C. E., Nov 22 '12 at 22:15

score 6 · Answer 1 · answered Nov 22 '12 at 22:13

6

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

answered Nov 22 '12 at 22:13

Meliborn

6,495
6
34
53

@user1785870 For IE6/7 you can optionally use the **[box-sizing polyfill](https://github.com/Schepp/box-sizing-polyfill)** to provide `box-sizing` feature. – Hashem Qolami Nov 22 '12 at 22:29
@user1785870 I have solution for IE7 – Vladimir Starkov Nov 23 '12 at 05:34

score 3 · Answer 2 · answered Nov 22 '12 at 22:11

3

Ah, the good old Box Model. Padding is ADDED to the width, so in order to achieve the desired effect, you'd have to use percentages in padding also. Try this:

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

answered Nov 22 '12 at 22:11

Mathew Thompson

55,877
15
127
148

im absolutely avare of this and box model. I know about it and it has to be pixel perfect. – user1785870 Nov 22 '12 at 22:15
Then as @Meliborn suggested, box sizing is your way to go (not sure if that works in IE7/IE8 though). – Mathew Thompson Nov 22 '12 at 22:16
@user1785870 Another solution is to fix the size of the width (if it has to be pixel perfect). – Mathew Thompson Nov 22 '12 at 22:22

score 1 · Answer 3 · edited May 23 '17 at 12:25

You can check my answer in related question

Demo on jsFiddle:
enter image description here

HTML markup:

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

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

score 0 · Answer 4 · answered Nov 22 '12 at 22:09

0

Add margin property to your css code.

answered Nov 22 '12 at 22:09

SaidbakR

13,303
20
101
195

2

This has to do with the box model adding padding to the width. So the width will be 100%+padding width. Please motivate why your solution will work. – C. E. Nov 22 '12 at 22:11

100% width input with padding

4 Answers4