CSS Form

tutorial and example
tutorial and example

You can create attractive HTML form by using CSS.

Style input Fields

The Input Field width properties are used to determine the width of the input field.

Let us see an example of CSS style input fields:

Try Now

Note: If you want to style a specific input type then use attribute selectors.

  • input[type=text] : You can only select text fields.
  • input[type=password] : You can only select password fields.
  • input[type=number] : You can only select number fields etc.

Padded inputs

This padding property is used to add space inside the text fields. The given below example of padded inputs.

Example

Bordered inputs

This bordered property is used to change the border size and color. Only you can use border property.

Example

Colored inputs

Colored inputs are used to set the background color buy using its properties ackground-color.

Example

Input with icon/image

You can use icons/image inside the input by using background-image and background-positionproperty.

Colored inputs are used to set the background color buy using its properties background-color.

Example

Try Now