कैसे करें - एनिमेटेड खोज फ़ॉर्म
CSS के साथ एनिमेटेड खोज फ़ॉर्म बनाने का तरीका जानें।
एनिमेटेड सर्च फॉर्म कैसे बनाएं
इनपुट फ़ील्ड पर क्लिक करें:
चरण 1) HTML जोड़ें:
उदाहरण
<input type="text" name="search" placeholder="Search..">
चरण 2) सीएसएस जोड़ें:
उदाहरण
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
युक्ति: HTML प्रपत्रों के बारे में अधिक जानने के लिए हमारे HTML प्रपत्र ट्यूटोरियल पर जाएँ।
HTML फॉर्म को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे CSS फॉर्म्स ट्यूटोरियल पर जाएँ।