🌹🖤
كيف اخصص علامة ايقونة معينة لحذف النص المدخل في صندوق البحث
التعليق السابق
هل يمكن تصميم علامة الحذف التي في النوع search ؟
نعم يمكنك ذلك , لكن الأمر غير منطقي كونه يمكن عمل ذات الفكرة بشيفرة أقل . هل يمكن معرفة الهدف وراء ذلك ؟
هل يمكن معرفة الهدف وراء ذلك ؟
اذا قمت باستخدام type="text"فعندها يجب احضار صورة ما لاستخدامها
بينما الtype="search" الايقونة موجودة فقط علي ان اصممها 🌹
يمكن تخصيص الشيفرة حتى تتلائم وفق حاجتك و مطلوبك .
و لنقل مثلا أننا نريد تغيير الأيقونة من علامة X إلى أيقونة سلة مهملات للحذف , لنقم بتعريف الهيكلية التالية :
<div class="input-container"> <input type="text" id="text_input"/> <i class="fa fa-trash"></i> </div>
ثم لنقم بضبط تموضع الأيقونة في مكان مناسب بإضافة بعض التنسيقات :
.input-container{ position: relative; } input#text_input { width: 100%; height: 100%; } i{ position: absolute; top: 0; left: 4px; }
و أخيرا إضافة التفاعلية المطلوبة :
$('i.fa-trash').on('click' , function(){ $('#text_input').val(''); });
سيمكنك بهذا عمل الكثير من الأفكار , من مثل تخصيص الأيقونة أو تغييرها إلى صورة أو غيرها ..
التعليقات