شرح صفوف ومحتوى الفقرة
عند وضع أيقونة بحث زخرفية أو شارة توضيحية فوق حقل إدخال <input> أو زر باستخدام التموضع المطلق position: absolute، تعترض تلك الطبقة العلوية نقرات الفأرة الواقعة فوق مساحتها، فيتفاجأ المستخدم بعدم استجابة الحقل الموجود أسفلها.
يحل ضبط pointer-events: none على العنصر الزخرفي العلوي هذه المشكلة جذرياً؛ إذ يجعل الطبقة شفافة تماماً لاختبارات النقر واللمس لتعبر النقرات مباشرة إلى العنصر التفاعلي الواقع تحتها، بينما تعيد القيمة pointer-events: auto تفعيل استقبال النقرات عند الحاجة.
CSS
.field-wrap { position: relative; width: 280px; }
.search-input { width: 100%; padding: 10px 76px 10px 12px; }
.search-badge {
position: absolute; right: 10px; top: 8px;
pointer-events: none;
}