CSS Forms

Styling forms with CSS helps create a user-friendly and aesthetically pleasing experience. This guide covers various CSS techniques to enhance the appearance of forms and their elements.

Basic Form Styling

Basic form styling involves setting up consistent and visually appealing styles for form elements such as inputs, labels, and buttons.

Form Container

/* Form Container */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

        

Advanced Form Styling

For more advanced styling, you can enhance forms with custom styles for input focus, validation, and different input types.

Focus States

/* Input Focus Styles */
input:focus, textarea:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
    outline: none;
}

        

Validation Styles

/* Validation Styles */
input:invalid, textarea:invalid {
    border-color: #e74c3c;
}
input:valid, textarea:valid {
    border-color: #2ecc71;
}

        

Custom Checkboxes and Radio Buttons

/* Custom Checkbox */
input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked::before {
    content: '\\2714';
    font-size: 14px;
    color: #4a90e2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Custom Radio Button */
input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

input[type="radio"]:checked::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #4a90e2;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}