استایل فرم‌ها

استایل‌دهی به عناصر فرم در CSS: input، textarea، select، checkbox و دکمه‌ها

استایل فرم در CSS

فرم‌ها نقطه تعامل کاربر با سایت هستند. استایل مناسب، تجربه کاربری را بهبود می‌دهد.

عناصر اصلی فرم

عنصرتوضیح
inputورودی متن، رمز، ایمیل و...
textareaمتن چندخطی
selectمنوی کشویی
checkboxچک‌باکس
radioرادیو
buttonدکمه

۱. استایل Input

input {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        font-family: inherit;
        transition: border-color 0.3s;
        box-sizing: border-box;
    }
    
    input:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52,152,219,0.2);
    }

۲. استایل Textarea

textarea {
        width: 100%;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 8px;
        resize: vertical;  /* فقط عمودی قابل تغییر اندازه */
        font-family: inherit;
        min-height: 120px;
    }

۳. استایل Select

select {
        width: 100%;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 8px;
        background: white;
        cursor: pointer;
        font-family: inherit;
    }

۴. Checkbox سفارشی

/* مخفی کردن checkbox پیش‌فرض */
    input[type="checkbox"] {
        appearance: none;
        width: 24px;
        height: 24px;
        border: 2px solid #3498db;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
    }
    
    /* تیک وقتی انتخاب شده */
    input[type="checkbox"]:checked {
        background: #3498db;
    }
    
    input[type="checkbox"]:checked::after {
        content: "✓";
        position: absolute;
        color: white;
        font-size: 16px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

۵. Radio سفارشی

input[type="radio"] {
        appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #3498db;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
    }
    
    input[type="radio"]:checked {
        border-color: #3498db;
    }
    
    input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background: #3498db;
        border-radius: 50%;
    }

۶. دکمه‌های فرم

.btn-submit {
        background: #3498db;
        color: white;
        padding: 12px 30px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .btn-submit:hover {
        background: #2980b9;
    }
    
    .btn-submit:disabled {
        background: #bdc3c7;
        cursor: not-allowed;
    }

اعتبارسنجی با CSS

/* فیلد معتبر */
    input:valid { border-color: #2ecc71; }
    
    /* فیلد نامعتبر */
    input:invalid:not(:placeholder-shown) { border-color: #e74c3c; }

فرم گروه‌بندی شده

.form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #333;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط