تخصيص عنصر التحكم

واجه العديد من المطورين تحديات في تصميم السيطرة. يعرض هذا العنصر عادةً مربع نص وزرًا، والذي قد لا يتماشى دائمًا مع الجماليات المرغوبة.

إخفاء مربع النص والاحتفاظ بالزر

للحصول على مظهر أنظف يعرض الزر فقط، يمكننا الاستفادة من تقنيات CSS. إليك حل فعال:

رمز CSS:

/* Define the container div for positioning */
div.fileinputs {
  position: relative;
}

/* Style the fake file input that overlays the real one */
div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* Customize the button in the fake file input */
div.fakefile input[type=button] {
  cursor: pointer;
  width: 148px;
}

/* Hide the real file input element */
div.fileinputs input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

رمز HTML:

يقوم كود CSS وHTML هذا بإنشاء حاوية div (.fileinputs) لوضع العناصر. داخل هذه الحاوية، نضيف عنصر إدخال ملف مزيف (.fakefile) الذي يظهر أعلى إدخال الملف الحقيقي (.file). من خلال ضبط عتامة المدخلات الحقيقية على 0، تصبح غير مرئية. يتم بعد ذلك تخصيص الزر الموجود في إدخال الملف المزيف باستخدام نمط العرض والمؤشر للحفاظ على الأداء الوظيفي وسهولة الاستخدام.