Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

input width 100% and margin/padding

input width 100% and margin/padding

Problem

How to use inputs with 100% Width and margin/padding??

When the input has no focus the width is 2 pixel wider than the parent element, but on focus the width is right? How to solve this?! :-/

jsfidle

http://jsfiddle.net/eHQSR/1/

code

input, textarea {
    width:100%;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

input, textarea, button {
    display:inline-block;
    font-family:arial;
    margin:1px;
}

input, textarea {
    background-color:#FFFFFF;
    border:1px solid #297296;

    color:#333333;
    font-size:12px;
    padding:4px 4px;
}

input:focus, textarea:focus {
    border-color:#1a4c91;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.07), 0 0 6px #7ab5d3;
    border-width:2px;
    margin:0px;
}

Problem courtesy of: clarkk

Solution

It's because of your margin on the inputs, spacing them from the parent element (it's worse when not using border-box but still occurs because margin is not included in the width calculation).

input, textarea, button {
    display:inline-block;
    font-family:arial;
    margin:1px;
}

Instead, you can remove this inner margin and put 1px of padding on the parent: http://jsfiddle.net/eHQSR/3/

Update

As I said in the comment below, the extra border from the :focus styles was eating into your margin first which is why the height went unchanged. So I left the margin on there, removed the margin from the left, and then added the padding on just the left and right of the parent. So the width should be correct now and the height won't "change" since it still eats into the margin above and below first (but as I noted, if you make the border any bigger it would still change the height of the input). All of this would be much simpler with a specified height somewhere.

http://jsfiddle.net/eHQSR/5/

Solution courtesy of: skyline3000

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

input width 100% and margin/padding

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×