CSS Forms

Forms are often the primary point of interaction between users and your website. Custom styling with CSS can make your forms much more enjoyable and easier to use.

Styled Contact Form

Test the input fields below to see the custom :focus state:

Important Form Styling CSS

• width: 100%; Often used for text inputs to make them fill the container.
• padding: Adds space inside the input for better text readability.
• box-sizing: border-box; Ensures that padding does not increase the input's total width.
• :focus selector: Styles the input when the user clicks or tabs into it.
• outline: none; Usually applied together with a custom border-color on focus.

The CSS Code

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}

input[type=text]:focus {
    border-color: #2e7d52;
    outline: none;
}