Easy Responsive Form Fields

Dealing with form fields can be a little tricky when making a responsive theme for a website. You can code your CSS for each device or browser width, which can results in a lot of extra or redundant code, or you can use this simple technique.

Set your text fields (or input/element of your choice) to be 100% of the parent element:

div {
    width: 300px;
    padding: 10px;
}
input["text"] {
    width: 100%; 
    padding: 0px
}

Responsive Fields with Padding

Your design may call for a little padding inside of the field. The usual solution would be to add padding, but the padding adds extra width to the input field element so it breaks the border. 100% (or 300px) + 5px + 5px.

div {
    width: 300px;
    padding: 10px;
}
input["text"] {
    width: 100%; 
    padding: 5px;
}

A Better Solution with Text Indent

Use the “text-indent” attribute to give it some extra space from the left, and use padding to add some room to the top and bottom. This attribute doesn’t affect the width, so it makes it very convenient when working with responsive websites where the width of the parent element changes.

div {
    width: 300px;
    padding: 10px;
}
input["text"] {
    width: 100%; 
    padding: 5px 0;
    text-indent: 5px;
}