تصميم حقل الإدخال كمدخلات مقسمة

توجد طرق عديدة لإنشاء سلسلة من حقول الإدخال المقسمة. تستخدم إحدى الطرق "تباعد الأحرف" لفصل الأحرف داخل حقل إدخال واحد. بالإضافة إلى ذلك، يمكن أن يؤدي تصميم "صورة الخلفية" و"الحدود السفلية" إلى تعزيز وهم حقول الإدخال المتعددة.

CSS Snippet

يوضح كود CSS التالي كيف لإنشاء التأثير المطلوب:

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline: none;
}

تنفيذ HTML