CODEWITHSUNDEEP
css
user1785870
user1785870

Reputation: 477

100% width input with padding

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.

Upvotes: 4

Views: 3134

Answers (4)

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

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 */ 
}

Upvotes: 1

Meliborn
Meliborn

Reputation: 6645

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

Upvotes: 6

Mathew Thompson
Mathew Thompson

Reputation: 56429

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%;
}

Upvotes: 3

SaidbakR
SaidbakR

Reputation: 13544

Add margin property to your css code.

Upvotes: 0

Related Questions