Input Styling — تحدي CSS

حقل إدخال جميل: حدود للحقل، وتأثير عند التركيز (border-color أو box-shadow)، و transition، وتسمية .input-label بموضع absolute تتحرك بـ transform.

.form-group {
    /* تنسيق مجموعة الحقل */
}

.input-field {
    /* نسق حقل الإدخال */
}

.input-field:focus {
    /* تنسيق عند التركيز */
}

.input-label {
    /* تنسيق التسمية */
}

.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
    /* تنسيق التسمية عند التركيز */
}

حل هذا التحدي يرتبط بفتح دورة «CSS المتقدم» بحسابك.