कैसे बनाया जाता है: एनिमेटिंग सर्च बॉक्स

CSS के द्वारा एनिमेटिंग सर्च फॉर्म बनाना सीखें。

इनपुट फील्ड पर क्लिक करें:

कैसे एनिमेटिंग सर्च बॉक्स बनाएं

पहला कदम - HTML जोड़ें:

<input type="text" name="search" placeholder="Search..">

दूसरा कदम - CSS जोड़ें:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* जब इनपुट फील्ड फोकस पाता है, इसकी चौड़ाई को 100% में बदल दें */
input[type=text]:focus {
  width: 100%;
}

खुद ही प्रयास करें

संबंधित पृष्ठ

शिक्षा:HTML फॉर्म

शिक्षा:CSS फॉर्म