4 oy oldin

Qanday qilib iconni input ichiga joylash mumkin?

Sizlarga hozir qanday qilib iconni input ichiga joylashni o'rgataman.

Buni 2 xil ko'rinishda tayyorlasa bo'ladi.

Birinchisi: iconni input yonida joylashtirish.

 

Ikkinchisi: iconni input ichiga joylashtirish. 

Har ikkala usulni ham vazifasi bir xil, albatta dizayn jihatdan qaysi biri yoqsa, o'shanisidan foydalanishingiz mumkin.

Sizlar bilan birinchi bo'lib iconni input yonida joylashtirishni ko'rib chiqamiz.

Iconni input yonida joylashtirish.

Dastlab icon hamda input uchun 1 ta konteyner yarating. Ochilgan konteynerda icon va inputni bitta qatorda chiqarish uchun bu konteynerga display: flex; bering.

Endi sizga icon kerak. Buning uchun iconlar to'plami bo'lgan fontawesome saytiga kirib, uni o'z HTML sahifangizga ulang va u yerdan kerakli iconni tanlab, uni konteyner ichiga joylang.

So'ngra o'sha konteyner ichida input elementini yarating hamda uni icon bilan bir xil o'lchamga keltirish uchun inputga padding bering.

Quyida uning natijasi.

Iconni input ichiga joylashtirish.

Bu usulda ham input hamda iconni bitta konteyner ichiga joylashtiring va u konteynerga position: relative; bering. Input width: 100%; bo'ladi, chunki u butun konteynerni egallashi kerak. Iconga esa position: absolute; bering va uni top, left, bottom, right orqali inputni kerakli joyiga olib boring. So'ngra inputga text yozilganda text icon tagidan chiqmasligi uchun icon joylashgan tarafga keraklicha padding bering.

Iconni input yoniga Bootstrap oraqli joylashtirish.

Bootstrap usulida siz hech qanday kod yozmaysiz, shunchaki tayyor kodni ko'chirib qo'yasiz.

Buning uchun birinchi navbatda Bootstrapni  o'z HTML sahifangizga ulab oling va u yerdan kerakli elementlar dan birini kodini o'z proyektingizga ko'chirib oling. Agarda qaysidir elementni o'zgartirish kerak bo'lsa uni o'zingizga moslashtirib olishingiz mumkin.

Mana sizlar bilan yuqorida 3 ta usulni ko'rib chiqdik. Agarda bularni sizlarga foydasi tekkan bo'lsa hursandman.

Yangi maqolalarni birinchilardan bo'lib o'qish uchun telegram kanalimizga a'zo bo'ling!