Responsive Form Elements

How to make your forms Responsive

Responsive Form Elements
Sierag/Flickr

box-sizing

* selector will apply to entire layout, not just forms.

* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Paul Irish calls this “a natural box layout model to all elements”

max-width: 100% to keep consistent form sizes

textarea,
input[type=text],
input[type=email],
input[type=password] {
    display: block; 
    max-width: 100%;
} 

Additionally you can use CSS Reset such as normalize.css or Reset CSS

If everything else was done right, this is pretty much all you need and what will make any* form Responsive.

Leave a Reply

Your email address will not be published. Required fields are marked *