如何创建：菜单中的输入字段

如何在导航栏中添加输入字段

第一步 - 添加 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:

* {box-sizing: border-box;}
/* تعيين نماذج القائمة التوجيهية */
.topnav {
  الانتشار: مخفي;
  لون الخلفية: #e9e9e9;
{}
/* تعيين نماذج الرابط في القائمة التوجيهية */
.topnav a {
  التحليق: يسار;
  العرض: مكانه;
  لون النص: أسود;
  التنسيق النصي: مركز;
  السماح: 14px 16px;
  إزالة التشديد: لا;
  حجم النص: 17px;
{}
/* تعيين نماذج النص عند مرور الفأرة فوق الرابط في القائمة التوجيهية */
.topnav a:hover {
  لون الخلفية: #ddd;
  لون النص: أسود;
{}
/* تعيين نماذج الرابط الحالي أو النشط */
.topnav a.active {
  لون الخلفية: #2196F3;
  اللون: أبيض;
{}
/* تعيين نماذج وعاء البحث */
.topnav .search-container {
  التحليق: يمين;
{}
/* تعيين نماذج مربع الإدخال داخل القائمة التوجيهية */
.topnav input[type=text] {
  السماح: 6px;
  الجمع: 8px;
  حجم النص: 17px;
  الحدود: لا شيء;
{}
/* تعيين نماذج الزر داخل وعاء البحث */
.topnav .search-container button {
  التحليق: يمين;
  السماح: 6px;
  الجمع: 8px;
  الجمع: 16px;
  اللون: #ddd;
  حجم النص: 17px;
  الحدود: لا شيء;
  النقر بالماوس: سهم;
{}
.topnav .search-container button:hover {
  اللون: #ccc;
{}
/* إضافة استجابة - في الشاشات الصغيرة، العرض العمودي بدلاً من الأفقية للقائمة التوجيهية */
@media screen and (max-width: 600px) {
  .topnav .search-container {
    التحليق: لا شيء;
  {}
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    التحليق: لا شيء;
    العرض: مكانه;
    التنسيق النصي: اليسار;
    العرض: 100%;
    الجمع: 0;
    السماح: 14px;
  {}
  .topnav input[type=text] {
    border: 1px solid #ccc;
  {}
{}

تجربة شخصية