कैसे बनाया जाता है: मेनू में इनपुट फील्ड

नेविगेशन बार में इनपुट फील्ड कैसे जोड़ें

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

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

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

* {बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;}
/* नेविगेशन बार की शैली सेट करें */
.topnav {
  ओवरफ्लोव: हिड;
  बैकग्राउंड-कलर: #e9e9e9;
}
/* नेविगेशन बार के लिंक की शैली सेट करें */
.topnav a {
  फ्लोट: लेफ्ट;
  डिस्प्ले: ब्लॉक;
  रंग: श्वेत;
  लेफ्ट टेक्स्ट-एलाइन: मध्य;
  पैडिंग: 14पाइक्स 16पाइक्स;
  टेक्स्ट-डिक्टेशन: नहीं;
  फ़ॉन्ट-साइज़: 17पाइक्स;
}
/* नेविगेशन बार के लिंक पर माउस लटकने पर शैली सेट करें */
.topnav a:hover {
  बैकग्राउंड-कलर: #ddd;
  रंग: श्वेत;
}
/* वर्तमान/सक्रिय लिंक की शैली सेट करें */
.topnav a.active {
  बैकग्राउंड-कलर: #2196F3;
  रंग: श्वेत;
}
/* सर्च कंटेनर की शैली सेट करें */
.topnav .search-container {
  फ्लोट: राइट;
}
/* नेविगेशन बार के अंदर के इनपुट बॉक्स की शैली सेट करें */
.topnav input[type=text] {
  पैडिंग: 6पाइक्स;
  मार्ग-टॉप: 8पाइक्स;
  फ़ॉन्ट-साइज़: 17पाइक्स;
  बॉर्डर: नहीं;
}
/* सर्च कंटेनर के अंदर के बटन के शैली सेट करें */
.topnav .search-container button {
  फ्लोट: राइट;
  पैडिंग: 6पाइक्स;
  मार्ग-टॉप: 8पाइक्स;
  मार्ग-राइट: 16पाइक्स;
  बैकग्राउंड: #ddd;
  फ़ॉन्ट-साइज़: 17पाइक्स;
  बॉर्डर: नहीं;
  कर्सर: पॉइंटर;
}
.topnav .search-container button:hover {
  बैकग्राउंड: #ccc;
}
/* अनुपाती क्षमता जोड़ें - छोटे स्क्रीन पर, नेविगेशन बार को खंडी नहीं बल्कि वर्गीय दिखाएं */
@मीडिया स्क्रीन एण्ड (मैक्स-विडथ: 600पाइक्स) {
  .topnav .search-container {
    फ्लोट: नहीं;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    फ्लोट: नहीं;
    डिस्प्ले: ब्लॉक;
    लेफ्ट टेक्स्ट-एलाइन:;
    विस्तार: 100%;
    मार्गिन: 0;
    पैडिंग: 14पाइक्स;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

亲自试一试