Forms are created by using HTML forms and by using the CSS, you can create an interactive forms for the user. There are many CSS properties available which can be used to create and style HTML forms to make them more interactive, some of which are as follows:
Styling the Width of Input
The width property is used to set the width of the input field.
Consider the below example where the width is set to be 50% of the entire screen.
Example:
The below example applies to all <input> elements. But you only want to style a specific input type, you can use attribute selectors. For example: input[type=text], input[type=number], etc.
Add Padding in Inputs
The padding property is used to add spaces inside the text field.
Set Margin for Inputs
The margin property is used to add space outside the input field. It is helpful when there are many inputs.
Adding Border and Border-radius
The border property is used to bring change in the size and color of the border whereas border-radius property is used for adding rounded corners.
Consider the below example where a 3px solid blue border is created with a border-radius of 5px.
Users can also have a border on any particular side and remove others. Consider the below example where the user wants to border only on the bottom.
Adding Color to text and Background
The color property is used to change the color of the text in the input and the background-color property is used to change the color of the background of the input field.
Consider the below example where the color of the text is black and the background color is set to orange.
Focused Inputs
When we click on the input field it gets an outline of blue color. You can change this behavior by using :focus selector.
Consider the below example where the user wants a 2px solid black outline and orange background when focused.
Adding images in the Input form
The background-image property can be used to put an image inside the input form and it can be positioned using background-position property and the user can also decide whether to repeat or not.
Consider the example below with an image in the background with no-repeat mode.
Animated Search Input
The transition property can be used to change the width of the search input by specifying the relaxed width and focused width along with the time period for which operation will take place.
Consider below example where relaxed input field width is 20% which when focused changes to 50% in 0.5 seconds.
Styling Textareas
By using CSS styling, you can change the width, height, background-color, border, font-size, etc of textarea.