Previous
Written by: rJTutorial Team | Last Updated:

CSS Forms

In CSS, forms refer to the visual styling of HTML form elements like input fields, textareas, and buttons. While browsers provide default styles for these elements, they are often inconsistent across different platforms and rarely match a modern design aesthetic. By using CSS, you can transform a bland, native browser form into a polished, user-friendly interface that matches your brand.

Best Practice: Always include the box-sizing: border-box; property on your form elements. This ensures that padding and borders are included in the element's total width, making your layout much easier to manage.

Input Fields:

Input fields are the workhorses of any web form. Styling them effectively involves managing space, borders, and interaction states:

  • Sizing: Use the width property to control how much horizontal space the field takes up. Setting it to 100% is common for mobile-responsive designs.
  • Spacing: Apply padding to create breathing room for the text inside the box, and margin to separate the input from surrounding elements.
  • Borders: Customize the thickness, style, and color of borders. Use border-radius to soften the look with rounded corners.
  • Typography: Adjust font-size and color to ensure the user's input is legible and matches your site's font.
  • Interaction: Use the :focus pseudo-class to change the border color or add a shadow when a user clicks into a field.
Watch Out: If you use outline: none to remove the default blue focus ring, you must provide a high-contrast alternative using the :focus selector. Otherwise, keyboard users won't know which field they are currently on.

Textareas:

Textareas are used for multi-line user input. Unlike standard inputs, they have unique properties:

  • Resize Control: By default, most browsers allow users to drag the bottom-right corner of a textarea to resize it. You can control this using the resize property (values: none, vertical, horizontal, or both).
  • Consistency: Ensure textareas share the same font and border styles as your text inputs to maintain a unified look across the form.
Common Mistake: Leaving resize: both active can often break your site's layout if a user stretches the box too wide. It is usually better to use resize: vertical.

Example form:

HTML

<form action="/submit" method="post">
  <label for="name">Full Name</label>
  <input type="text" id="name" name="name" placeholder="Your name">
  
  <label for="password">Password</label>
  <input type="password" id="password" name="password" placeholder="Your password">
  
  <input type="submit" value="Submit">
</form>
Developer Tip: Always pair your inputs with a <label> tag and use the for attribute. This makes the form accessible to screen readers and allows users to click the label to focus the input field.

Here’s a simple example of a styled form using CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Apply a global box-sizing rule */
        * {
            box-sizing: border-box;
        }

        /* Basic form styling */
        form {
            max-width: 400px;
            margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* Style the labels */
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }

        /* Style text and password inputs */
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        /* Highlight inputs on focus */
        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
        }

        /* Style the submit button */
        input[type="submit"] {
            width: 100%;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 12px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* Change button color on hover */
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form action="/submit" method="post">
        <label for="user-name">Name</label>
        <input type="text" id="user-name" name="name" placeholder="Enter your name">
        
        <label for="user-pass">Password</label>
        <input type="password" id="user-pass" name="password" placeholder="Enter your password">
        
        <input type="submit" value="Sign In">
    </form>
</body>
</html>

In this example:

  • Layout: The form is centered and capped at a max-width of 400px, which looks great on both desktop and mobile. We've added a light background color and a subtle box-shadow to make it pop from the page.
  • Input Styling: Fields have generous padding and a border-radius for a modern, "soft" feel. We also added a transition property to make the color change on focus feel smooth.
  • Visual Feedback: The submit button changes its background color when hovered (using :hover), providing immediate visual feedback to the user that the element is interactive.
  • Accessibility: By styling the labels with display: block, we ensure they sit clearly above the inputs, making the form easy to read at a glance.
Previous