كيف اخصص علامة ايقونة معينة لحذف النص المدخل في صندوق البحث

صحيح أنه لا بأس بشيفرة مخصصة و قد لا تتطلب الكثير من HTML , CSS و جافاسكربت , و لكن المقصود بأقل هو المقارن بإستعمال الحقل من نوع 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('');
}); 

سيمكنك بهذا عمل الكثير من الأفكار , من مثل تخصيص الأيقونة أو تغييرها إلى صورة أو غيرها ..