CSS Forms - Detailed Overview

Introduction to CSS Form Styling

Styling forms is essential for creating user-friendly and visually appealing web forms. CSS can be used to enhance the appearance of form elements such as inputs, textareas, select boxes, and buttons.

Examples of CSS Form Styling

Below are examples of how to style various form elements:

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
textarea, 
select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}

input[type="submit"], 
button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

input[type="submit"]:hover, 
button:hover {
    background-color: #0056b3;
}