CSS Forms

HTML forms are one of the essential parts in most popular websites. With the help of CSS we style them with great effects and features. The different elements of the forms can be styled for different state changes.

Input Fields

The input fields can be styled to have specific properties like width. You can style all the input fields in general like by using the input{} selector or you can input of specific types like input[type=text], input[type=password] etc.

Padding

A little padding inside the text fields can make the input text more readable. We can use the padding property for the same purpose. In fact, if there are multiple inputs, we can also add margins to make them clearly visible.

Borders

You can use rounded borders for the input fields, or colored borders to notify valid/invalid input. The border property will help you change the border color and size, while the border-radius property is there to help you with rounded corners.

Background-Color

background-color property can be used to show the change in focus. So while you are entering the data the input field’s background might turn blue. You can also manipulate the color property and change the text color

Focus

We can also use the :focus selector to style the focused input fields like changing backgrounds or the opacity of the field.

Animation

Moreover, we can add animated effects for focus change. For instance, you can animate the width when the field comes in focus.

Text areas

We can avoid the resizing of text areas by setting the resize property as none.

Responsive Form

We can make the form responsive to the changes in screen size. When the size go less than a particular width the different columns get stacked on each other. This effect can be achieved using the @media rule.