Input fokusi va ikonkalar
Inputni focus bilan uslublash
Standart holda ba’zi brauzerlar input focus olganda (bosilganda) uning atrofiga ko‘k outline qo‘shadi. Bu xatti-harakatni inputga outline: none; qo‘shib olib tashlashingiz mumkin.
Input maydoni focus olganda uning bilan biror narsa qilish uchun :focus selektoridan foydalaning:
Inputni ikonka/rasm bilan uslublash
Input ichida ikonka xohlasangiz, background-image xossasidan foydalaning va uni background-position xossasi bilan joylashtiring. Shuningdek, ikonka joyini ajratish uchun katta chap padding qo‘shayotganimizga e’tibor bering:
Misol
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
O‘zingiz sinab ko‘ring »
Animatsiyali qidiruv maydoni
Bu misolda qidiruv inputi focus olganda uning kengligini animatsiya qilish uchun CSS transition.php">transition xossasidan foydalanamiz. transition xossasi haqida keyinchalik CSS o‘tishlar (transitions) bobimizda ko‘proq bilib olasiz.
Misol
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!