CSS Forms Practice Questions with Solutions

Introduction

CSS forms help create attractive, user-friendly, and responsive input fields, buttons, and text areas. By applying CSS, you can control the size, colors, borders, spacing, focus effects, and overall appearance of form elements. Well-designed forms improve the user experience and make websites look more professional. In this chapter, you’ll practice CSS form styling through simple solved CSS Forms practice questions that are easy for beginners to understand.

Question 1: Add a Border to an Input Field

Problem Statement

Write CSS to add a 2px solid gray border to all input fields.

CSS Code

input {    border: 2pxsolidgray;}

Output

All input fields display with a 2px gray border.

Explanation

• border adds an outline around the input field.
• 2px defines the border thickness.
• solid creates a continuous border style.

Question 2: Add Padding Inside an Input Field

Problem Statement

Write CSS to add spacing inside all input fields.

CSS Code

input {    padding: 10px;}

Output

Extra space appears inside each input field, making the text easier to read.

Explanation

• padding adds space between the text and the border.
• It improves readability.
• Larger padding creates a more comfortable typing experience.

Question 3: Create Rounded Input Fields

Problem Statement

Write CSS to create rounded corners for all input fields.

CSS Code

input {    border-radius: 8px;}

Output

All input fields display with rounded corners.

Explanation

• border-radius rounds the corners of the input field.
• Rounded inputs create a modern appearance.
• This style is commonly used in registration and login forms.

Question 4: Change the Background Color of an Input Field

Problem Statement

Write CSS to apply a light blue background to all input fields.

CSS Code

input {    background-color: #e6f7ff;}

Output

Input fields display with a light blue background.

Explanation

• background-color changes the background of the input field.
• Light colors improve readability.
• Background colors help form fields stand out.

Question 5: Highlight an Input Field on Focus

Problem Statement

Write CSS to change the border color when an input field receives focus.

CSS Code

input:focus {    border-color: blue;}

Output

The input field displays a blue border when the user clicks inside it.

Explanation

• :focus styles the active input field.
• It helps users identify the field they are currently editing.
• Focus effects improve accessibility and usability.

Question 6: Style a Textarea

Problem Statement

Write CSS to add a border and padding to a <textarea>.

CSS Code

textarea {    border: 2pxsolidgray;    padding: 10px;}

Output

The textarea displays with a 2px gray border and comfortable inner spacing.

Explanation

• border creates a visible outline.
• padding adds space between the text and the border.
• This makes the textarea easier to read and use.

Question 7: Change the Mouse Cursor on a Button

Problem Statement

Write CSS to display a pointer cursor when the mouse is placed over a button.

CSS Code

button {    cursor: pointer;}

Output

The mouse pointer changes to a hand icon when it moves over the button.

Explanation

• cursor: pointer; indicates that the button is clickable.
• It improves the user experience.
• This style is commonly used for buttons and links.

Question 8: Style a Submit Button

Problem Statement

Write CSS to create a green submit button with white text.

CSS Code

input[type="submit"] {    background-color: green;    color: white;}

Output

The submit button displays with a green background and white text.

Explanation

• [type="submit"] selects only submit buttons.
• background-color changes the button color.
• color changes the text color.

Question 9: Disable Textarea Resizing

Problem Statement

Write CSS to prevent users from resizing a <textarea>.

CSS Code

textarea {    resize: none;}

Output

The textarea size remains fixed and cannot be resized by the user.

Explanation

• resize: none; disables the resize handle.
• It keeps the form layout consistent.
• This is useful when a fixed textarea size is required.

Question 10: Make Form Elements Full Width

Problem Statement

Write CSS to make all input fields occupy the full width of their parent container.

CSS Code

input {    width: 100%;}

Output

Each input field stretches across the full width of its parent container.

Explanation

• width: 100%; makes the input responsive.
• The field automatically adjusts to the container width.
• This layout is commonly used in responsive forms.

Key Takeaways

• border creates visible input field outlines.
• padding improves readability by adding inner spacing.
• border-radius creates rounded input fields.
• background-color changes the appearance of form controls.
• :focus highlights the active input field.
• cursor: pointer; indicates clickable buttons.
• resize: none; prevents textarea resizing.
• width: 100%; creates responsive form fields.

Frequently Asked Questions (FAQs)

1. How do I add a border to an input field?

Use:

input {    border: 2pxsolidgray;}

2. How can I create rounded input fields?

Use:

input {    border-radius: 8px;}

3. How do I highlight an input field when it is selected?

Use the :focus pseudo-class.

input:focus {    border-color: blue;}

4. How do I change the mouse cursor over a button?

Use:

button {    cursor: pointer;}

5. How do I prevent a textarea from being resized?

Use:

textarea {    resize: none;}

6. How do I make input fields responsive?

Use:

input {    width: 100%;}

7. Which CSS properties are commonly used to style forms?

The most commonly used properties are:

• border
• padding
• margin
• width
• background-color
• border-radius
• color
• cursor
• resize

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar