فرم جستجوی زیبا در css3. طراحی یک فرم جستجوی زیبا در CSS3

آنها می گویند، من مورد انتقاد قرار گرفتم، طرح بندی بد است، اما HTML5 و CSS3 مدرن وجود دارد.

البته، می فهمم، آخرین استانداردها باحال هستند و اینها. اما واقعیت این است که من، به عنوان یک قاعده، حروفچینی را به سفارش انجام می دهم و در آنجا، در بیشتر موارد، هویت کامل در مرورگرهای مختلف مهم است، که اجازه استفاده از آخرین فناوری ها را نمی دهد. بنابراین، من در درجه اول بر روی سازگاری بین مرورگرها تمرکز می کنم و از روی عادت، فرم جستجو را "به روش قدیمی" ایجاد می کنم.

به طور کلی با این پست وضعیت را اصلاح می کنم (به خاطر کسانی که از مقاله قبلی ناراضی بودند =) و نسخه خود را از طرح بندی همان فرم جستجو ارائه می دهم اما با استفاده از فناوری های HTML5 و CSS3.

نمونه ای از آنچه در نتیجه اتفاق می افتد ممکن است.

چه چیزهایی را هنگام تنظیم این فرم با استفاده از HTML5 و CSS3 از دست می دهیم

1. IE9 و پایین‌تر - متن پیش‌فرض (ویژگی متغیر مکان) را نمی‌بیند.
2. IE8 و پایین تر - گوشه های گرد و سایه های داخلی را نمی بینند.
3. IE7 - باید عرض فرم متفاوتی را برای آن مشخص کنید، زیرا از ویژگی اندازه جعبه پشتیبانی نمی کند.
4. IE6 - اما ما اصلاً آن را در نظر نمی گیریم =)

در سایر مرورگرهای مدرن، همه چیز خوب است. من معتقدم که کاستی‌های فوق مهم نیستند، بنابراین برای سایت خود جسورانه از فرمی استفاده می‌کنم که با استفاده از آخرین فن‌آوری‌ها طراحی شده است.

کد HTML فرم جستجو

به نظر می رسد این است:

در مقایسه با فرم مقاله قبلی، تغییرات زیر مطابق با فناوری HTML5 ایجاد شده است:

1. ویژگی type="text" با type="search" جایگزین شده است.
2. اسکریپت درون خطی با placeholder="search جایگزین شد" .!}

کد CSS

در اینجا تمام استایل های لازم همراه با نظرات وجود دارد:

جستجو ( /* پهنای مورد نیاز فرم را بسته به طرح تنظیم کنید ** فرم بدون مشکل کشیده می شود */ عرض: 35٪؛ /* دکمه ارسال کاملاً در موقعیت قرار می گیرد، ** بنابراین این ویژگی مورد نیاز است */ موقعیت: نسبی؛ ) .ورودی جستجو (/* غیرفعال کردن مرزها در ورودی ها */ مرز: هیچ؛ ) /* سبک های فیلد ورودی */ .search .input (/* کشش فیلد ورودی به عرض کامل فرم */ عرض % قرار داده شده در آنجا */ padding: 8px 37px 9px 15px؛ /* برای ایجاد عرض فیلد ورودی (100%) شامل padding درون خطی */ -moz-box-sizing: border-box; box-sizing: border-box; / * سایه های درون خطی اضافه کنید */ box-shadow: inset 0 0 5px rgba(0,0 ,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3)؛ /* گوشه های گرد */ border-radius: 20px؛ پس‌زمینه: #EEE؛ فونت: 13px Tahoma، Arial، sans-serif؛ رنگ: #555. طرح کلی: هیچ ) /* تغییر ظاهر فیلد ورودی در فوکوس */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4)؛ پس‌زمینه: #E8E8E8؛ رنگ: #333؛ ) /* دکمه ارسال را استایل دهید */ .search .submit ( /* دکمه را کاملاً از لبه سمت راست فرم قرار دهید */ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ عرض: 37 پیکسل؛ /* دکمه را به ارتفاع کامل فرم بکشید */ ارتفاع: 100٪؛ مکان نما: نشانگر؛ پس زمینه: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% بدون تکرار؛ /* شفافیت را به دکمه ارسال اضافه کنید */ opacity: 0.5؛ ) /* تغییر شفافیت دکمه ارسال. .submit:hover ( opacity: 0.8; ) /* این ویژگی برای مرورگرها مورد نیاز است تا مرورگرها ** Chrome و Safari بتوانند ورودی های */ ورودی (-webkit-appearance: none; ) را استایل کنند.

و سبک های IE زیر نسخه 9:

/* سبک های جداگانه ای را برای IE زیر نسخه 9 تنظیم کنید */ *+html .search ( /* برای IE7 عرض را برای مرورگرهای دیگر تنظیم کنید و یک بالشتک ** سمت راست اضافه کنید تا دکمه ارسال در جای خود قرار گیرد */ عرض: 28 %؛ padding : 0 52px 0 0; ) .search .input ( حاشیه: 1px جامد #DFDFDF؛ حاشیه بالا: 1px جامد #B3B3B3؛ padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( حاشیه: 1px جامد #CFCFCF؛ حاشیه بالا: 1px جامد #999; ) .search .submit ( فیلتر: alpha(opacity=50));

P.S.با تشکر از منتقدان برای نظرات در مورد مقاله قبلی! با تشکر از شما، من چند لحظه چیدمان جدید در ذهنم دارم.

دو گزینه برای فرم های جستجو که باعث صرفه جویی در فضا در سایت شما می شود. پس از کلیک کردن، فرم برای ورود متن گسترش می یابد. فقط استفاده شده CSS3.

HTML

فرم ساده با html5برچسب:

css

ابتدا، اجازه دهید استایل ها را مجدداً راه اندازی کنیم وب کیتمرورگرهایی که تمایل دارند به موتورهای جستجو اضافه کنند ورودیقاب برچسب، نماد بستن بنابراین، ما همه این موارد اضافی را حذف می کنیم:

ورودی ( طرح کلی: هیچ؛ ) ورودی ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration ، ورودی::-webkit-search-cancel-button (نمایش: هیچ، /* حذف جستجو و نماد لغو */ )

بیایید یک فرم جستجو ایجاد کنیم:

ما روی همه ویژگی ها نمی مانیم، فقط توجه داشته باشید که عرض ورودی جستجو ابتدا یک مقدار دارد 55 پیکسل، و به گسترش خواهد یافت 130 پیکسلدر لحظه تمرکز :تمرکز. ویژگی انتقالبه شما امکان می دهد این تغییر در عرض را متحرک کنید. برای درخشش استفاده می شود سایه جعبه:

ورودی ( پس‌زمینه: url #ededed (search-icon.png) بدون تکرار 9 پیکسل در مرکز؛ حاشیه: یکپارچه 1px #cccc؛ بالشتک: 9px 10px 9px 32px؛ عرض: 55px؛ -webkit-border-radius: 10em؛ -moz- border-radius: 10em; border-radius: 10em; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; ) input:focus (عرض: 130px; background-color: # fff؛ حاشیه-رنگ: #6dcff6؛ -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5)؛ -moz-box-shadow: 0 0 5px rgba(109,207,246,.5)؛ box-shadow: 0 0 5px rgba(109,207,246,.5)؛ )

که در نسخه ی نمایشی 2 ورودیقسمت جستجو حتی فشرده تر است - فقط نماد نمایش داده می شود. با کلیک بر روی آن، عرض فیلد ورودی نیز تغییر می کند.

ورودی #demo-b ( عرض: 18 پیکسل؛ بالشتک چپ: 10 پیکسل؛ رنگ: شفاف؛ مکان نما: نشانگر؛ ) ورودی #demo-b: شناور (رنگ پس‌زمینه: #fff؛ ) #دمو-b ورودی: فوکوس ( عرض : 130 پیکسل؛ بالشتک چپ: 32 پیکسل؛ رنگ: #000؛ رنگ پس‌زمینه: #fff؛ مکان‌نما: خودکار؛ )

و متن شفاف می شود:

ورودی #demo-b:-moz-placeholder (رنگ: شفاف؛ ) ورودی #demo-b::-webkit-input-placeholder (رنگ: شفاف؛ )

این فرم در تمام مرورگرهای مدرن کار می کند کروم, فایرفاکس, سافاری، و IE8+.

یکی از پرکاربردترین عناصر هر وب سایت، فرم جستجو است. اگر می‌خواهید قابلیت استفاده سایت خود را بهبود ببخشید و پیدا کردن آنچه به دنبال آن هستید را بسیار آسان‌تر کنید، باید در طراحی فرم جستجو جدی باشید.

بنابراین، امروز می خواهیم در مورد طراحی فرم جستجو با استفاده از ویژگی های CSS3 به شما بگوییم.

احتمالاً قبلاً آموزش‌هایی در مورد طراحی فرم جستجوی CSS3 پیدا کرده‌اید، اما امروز می‌خواهیم گزینه کمی متفاوت را به شما پیشنهاد کنیم - یک فرم جستجو با افکت سه‌بعدی که با استفاده از پارامتر box-shadow پیاده‌سازی شده است.

نشانه گذاری

در زیر می توانید کد HTML مورد استفاده برای توسعه این فرم را مشاهده کنید. لطفاً توجه داشته باشید که پرکننده ما با استفاده از HTML5 توسعه یافته است و ما از تمام ویژگی های لازم استفاده کرده ایم.

ابتدا می خواستیم از type="search" معرفی شده در HTML5 استفاده کنیم، اما به دلیل ناسازگاری با بسیاری از مرورگرهای مدرن، نظرمان تغییر کرد. اکنون باید چند خط اضافی کد CSS اضافه کنیم تا مقادیر اصلی را بازنویسی کنیم.

بیایید نگاهی به حداقل سبک های مورد استفاده برای ایجاد یک فرم جستجوی زیبای CSS3 بیندازیم:

فرم لفاف (
عرض: 450 پیکسل
بالشتک: 8 پیکسل
حاشیه: 100 پیکسل خودکار؛
سرریز: پنهان;
عرض حاشیه: 1px;
سبک حاشیه: جامد
حاشیه-رنگ: #دیده #بابابا #آآآ #بابابا;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1)، 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1)، 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px.
-webkit-border-radius: 10px.
شعاع حاشیه: 10 پیکسل
پس زمینه رنگ: #f6f6f6;
background-image: -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، from(#f6f6f6)، به (#eae8e8));
پس زمینه-تصویر: -webkit-linear-gradient(بالا، #f6f6f6، #eae8e8);
پس زمینه-تصویر: -moz-linear-gradient(بالا، #f6f6f6، #eae8e8);
پس زمینه-تصویر: -ms-linear-gradient(بالا، #f6f6f6، #eae8e8);
پس زمینه-تصویر: -o-linear-gradient(بالا، #f6f6f6، #eae8e8);
پس زمینه-تصویر: خطی- گرادیان (بالا، #f6f6f6، #eae8e8)؛
}

فرم لفاف #جستجو(
عرض: 330 پیکسل
ارتفاع: 20 پیکسل؛
بالشتک: 10px 5px;
شناور به سمت چپ؛
فونت: 16px پررنگ "lucida sans"، "trebuchet MS"، "Tahoma"؛
حاشیه: 1px جامد #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px.
حاشیه شعاع: 3 پیکسل
}

Form-wrapper #search:focus (
طرح کلی: 0;
حاشیه-رنگ: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}

Form-wrapper #search::-webkit-input-placeholder (
رنگ: #999;
وزن فونت: معمولی
}

Form-wrapper #search:-moz-placeholder (
رنگ: #999;
وزن فونت: معمولی
}

Form-wrapper #search:-ms-input-placeholder (
رنگ: #999;
وزن فونت: معمولی
}

فرم لفاف #ارائه (
float:right;
حاشیه: 1px جامد #00748f;
ارتفاع: 42px;
عرض: 100 پیکسل
بالشتک: 0;
مکان نما: اشاره گر
فونت: پررنگ 15px Arial, Helvetica;
رنگ: #فافافا;
تبدیل متن: بزرگ;
background-color: #0483a0;
background-image: -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، from(#31b2c3)، به(#0483a0));
پس زمینه-تصویر: -webkit-linear-gradient(بالا، #31b2c3، #0483a0);
پس زمینه-تصویر: -moz-linear-gradient(بالا، #31b2c3، #0483a0);
پس‌زمینه-تصویر: -ms-linear-gradient(بالا، #31b2c3، #0483a0);
پس‌زمینه-تصویر: -o-linear-gradient(بالا، #31b2c3، #0483a0);
پس‌زمینه-تصویر: خطی- گرادیان (بالا، #31b2c3، #0483a0)؛
-moz-border-radius: 3px;
-webkit-border-radius: 3px.
حاشیه شعاع: 3 پیکسل
text-shadow: 0 1px 0 rgba(0, 0,0, 0.3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

Form-wrapper #submit:hover,
.form-wrapper #submit:focus (
پس زمینه رنگ: #31b2c3;
background-image: -webkit-gradient(خطی، سمت چپ بالا، پایین سمت چپ، from(#0483a0)، به(#31b2c3));
پس زمینه-تصویر: -webkit-linear-gradient(بالا، #0483a0، #31b2c3);
پس زمینه-تصویر: -moz-linear-gradient(بالا، #0483a0، #31b2c3);
پس زمینه-تصویر: -ms-linear-gradient(top, #0483a0, #31b2c3);
پس‌زمینه-تصویر: -o-linear-gradient(بالا، #0483a0، #31b2c3);
پس زمینه-تصویر: خطی- گرادیان (بالا، #0483a0، #31b2c3)؛
}

Form-wrapper #submit:active (
طرح کلی: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

Form-wrapper #submit::-moz-focus-inner (
حاشیه: 0;
}
پشتیبانی از مرورگر

در زیر می توانید برخی از اسکرین شات ها را مشاهده کنید که فرم جستجوی ما را نشان می دهد. باید توجه داشته باشید که اگر صفحه در نسخه قدیمی مرورگر باز شود، به خوبی کار می کند. همچنین می خواهم اضافه کنم که این فرم جستجوی CSS3 کاملاً آماده استفاده است.

مرورگرهای مدرن کروم، فایرفاکس، سافاری، اپرا، IE10:

خبر خوب این است که IE10 از پرکننده HTML5 نیز پشتیبانی می کند.

نسخه های قدیمی IE (6/7/8):

در نتیجه

اگر مقالات قبلی ما را خوانده اید، احتمالاً می دانید که در اینجا ما در حال توسعه برنامه های کاربردی (با و بدون نسخه بازگشتی) برای همه مرورگرها هستیم. و این مثال نیز از این قاعده مستثنی نیست.

علاوه بر استفاده از یک فرم CSS3 برای ایجاد یک بلوک جستجو، می توانید به راحتی آن را برای ایجاد یک فرم مجوز یا یک فرم اشتراک تطبیق دهید.

این مقاله ویژگی‌های طرح‌بندی فرم جستجوی سایت را شرح می‌دهد، نمونه‌ای از نشانه‌گذاری کد معنایی، طراحی CSS3، به‌علاوه کمی جادوی jQuery در پایان ارائه می‌دهد.

• نشانه گذاری

  قبل از ظهور HTML5، فرم جستجو به یک فیلد متنی معمولی تبدیل شد، با ورود تدریجی نسخه جدیدی از زبان نشانه گذاری به زندگی ما، نوع خاصی از فیلد جستجو برای آن ظاهر شد. بنابراین در HTML یک سایت مدرن، ممکن است چیزی شبیه به این ببینیم:

  نتیجه کد در FF، Opera، IE9:

  و کمی متفاوت در مرورگرهای مبتنی بر موتور وب کیت (Chrome، Safari):

  کادر جستجو در وب کیت

  همانطور که می بینید، هنگامی که فوکوس به فیلد اضافه می شود، یک برجسته اضافه می شود و هنگام وارد کردن متن، یک دکمه واضح ظاهر می شود، زمانی که روی آن کلیک می کنید، محتویات فیلد حذف می شود که به خودی خود کاملاً راحت است.

  بدون استایل CSS، فرم جستجوی ما تاکنون بسیار ساده به نظر می رسد، در این مقاله سعی می کنیم چیزی شبیه به این انجام دهیم:

  
  مثلا: طرح بندی فرم جستجو

  مگر اینکه پشتیبانی از مرورگرهای قدیمی برنامه ریزی شده باشد، یک عنصر غیر معنایی خالی

  را می توان با شبه عنصر:before جایگزین کرد.

  ویژگی های طراحی فرم جستجو

  از آنجایی که من تصمیم گرفتم از بسیاری از ویژگی های CSS3 استفاده کنم، این معجزات در مرورگرهای قدیمی اینترنت اکسپلورر کار نمی کنند و برای دستیابی به سازگاری بین مرورگرها، باید عصا را به هم متصل کنید، کاری با تصاویر و غیره انجام دهید.

  اول از همه، من می خواهم به برخی از ویژگی ها توجه کنم، یعنی:

  • سبک سازی در مرورگرهای وب کیت
  • استایل نگهدارنده مکان

  جستجوی سبک های فرم در مرورگرهای کروم، سافاری

  بیایید با کلاس .search مقداری سبک به فیلد اضافه کنیم:

  جستجو ( پس‌زمینه: #d8e6ef؛ حاشیه: 1px جامد #000؛ )

  نتیجه اسکرین شات:

  در مرورگرهای FF، Opera، Chrome و Safari جستجو کنید

  طبق معمول در مرورگرها، گیج کننده و سردرگمی وجود دارد، در کروم حاشیه به نوعی به طرز عجیبی کار می کند (حاشیه ها ظاهر می شوند، انگار ما در حال تنظیم padding هستیم)، سافاری کاملا قوانین را نادیده می گیرد. اما در این شرایط راه حلی وجود دارد، این قانون را به کد CSS اضافه می کنیم:

  جستجو (-webkit-appearance: هیچ؛ )

  اکنون همه چیز در وب‌کیت‌ها خوب است، اما همچنان در برجسته کردن فیلدها در فوکوس پیش‌فرض و دکمه پاک کردن تفاوت دارند. این عناصر، اگرچه اغلب راحت هستند، اما گاهی اوقات می توانند ایده طراحی را خراب کنند و باید غیرفعال شوند. حذف نور پس زمینه بسیار ساده است:

  Search:focus ( طرح کلی: هیچ‌کدام؛ /* برجسته‌سازی فوکوس حذف شده */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : inset 0 0 2px #000; box-shadow: inset 0 0 2px #000؛ /* سایه داخلی به عنوان جایگزینی برای همه مرورگرها اضافه شد */ )

  باقی مانده است که از شر دکمه پاک خلاص شوید. در واقع، با جایگزین کردن یک صلیب ساده با نوعی پس زمینه، موقعیت و غیره می توان آن را به راحتی استایل داد، اما در مثال من نیازی به آن نخواهد بود:

  قانون /* فقط برای عنصر با جستجوی کلاس */ .search::-webkit-search-cancel-button (نمایش: هیچکدام؛ /* دکمه پاک کردن حذف شد */ ) /* یا همه فیلدها با نوع جستجو در سند */ ورودی: :-webkit-search-cancel-button (نمایش: هیچکدام؛ )

  در حال قالب‌بندی راهنمای ابزار متن مکان‌دار

  متأسفانه، با یک اشاره متنی، همه چیز کمی پیچیده تر از آن چیزی است که در نگاه اول به نظر می رسد. اولاً، در IE9 کار نمی‌کند، نه به مرورگرهای قدیمی‌تر، بنابراین جاوا اسکریپت باید در مکان‌های مهمی استفاده شود که در ابتدا مقداری متن در فیلد مورد نیاز است. ثانیاً، placeholder برای طراحی در مرورگرهای فایرفاکس، کروم، سافاری مناسب نیست و به هیچ وجه خود را به Opera نمی دهد:

  :-moz-placeholder ( رنگ: #304e62؛ /* تغییر رنگ در FF */ ) ::-webkit-input-placeholder (رنگ: #304e62؛ /* تغییر رنگ در وب کیت */)

  لطفاً توجه داشته باشید که اگر این انتخابگرها با کاما از هم جدا شده باشند کار نمی کنند، هر کدام باید از یک خط جدید شروع شوند.

  من لحظات خاصی را در نظر گرفتم که در آن مشکلات ممکن است ایجاد شود، بقیه نباید برای یک طراح چیدمان کم و بیش با تجربه مشکل ایجاد کند.

  اسکریپت های جی کوئری

  در نهایت، اجازه دهید چند اسکریپت به فرم خود اضافه کنیم، یعنی:

  • بیایید درخواست را لغو کنیم و هنگام ارسال یک فیلد خالی، یک پیام خطا نمایش دهیم
  • هنگام تمرکز بر روی زمین، یک ابزار کوچک در پایین اضافه کنید

  پیاده سازی همه اینها با قدرت jQ بسیار آسان است، من کد زیر را با نظرات دریافت کردم:

  $(function() ( /* handle form form */ $(".search-form").submit(function() ( var errVal = "Empty request"; /* اگر فیلد خالی یا حاوی مقدار errVal باشد */ اگر ($(".search").val() == "" || $(".search").val() == errVal) ( /* مقدار errVal را به فیلد اضافه کنید، رنگ پس زمینه را تغییر دهید و */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* false - فرم ارسال نشده است */ return false; )) )؛ / * وقتی فیلد متمرکز است */ $(".search").focus(function() ( /* مقدار فیلد را خالی تنظیم کنید، رنگ پس زمینه را به طور پیش فرض تنظیم کنید */ $(this).val(""). css((backgroundColor : "#d8e6ef"))؛ /* راهنمای ابزار نمایش */ $(".notice").fadeIn(400); ))؛ /* وقتی فوکوس برداشته شد */ $(".search"). blur(function( ) ( /* remove tooltip */ $(".notice").fadeOut(400); )); ));

  البته بهتر است برای عملکرد سریعتر اسکریپت، کلاس های موجود در اسکریپت را با شناسه ها جایگزین کنید و اگر عناصر دیگری با همان کلاس ها در سند ظاهر شوند، اسکریپت را خراب نمی کنند.

  نتایج

  بنابراین، ما فرم جستجوی سایت را طراحی و برنامه ریزی کردیم، این فرم در آخرین نسخه های فایرفاکس، کروم، اپرا، سافاری و IE9+ کار می کند. با میل شدید، می توانید یک نسخه کم و بیش متقابل مرورگر ایجاد کنید، حداقل با IE6 شروع کنید.

  بررسی شد

  • اینترنت اکسپلورر 9+
  • اپرا
  • فایرفاکس
  • کروم
  • سافاری

  به پروژه کمک کنید

کادر جستجو احتمالاً یکی از رایج ترین عناصر رابط کاربری است. هنگام کار بر روی سطح قابلیت استفاده از رابط، بسیار رایج است که بخواهید یک فیلد جستجوی شیک اضافه کنید. در این آموزش، با استفاده از شبه عناصر، چنین عنصر محبوبی را ایجاد خواهیم کرد.

نشانه گذاری HTML

برای تهیه چنین فیلدی، نشانه گذاری حداقل خواهد بود.

این مکان‌نمای ویژه HTML5 و ویژگی‌های مورد نیاز را استفاده می‌کند:

• نگهدارنده مکان- این ویژگی خروجی متن را در فیلد تنظیم می کند قبل از اینکه فیلد فوکوس ورودی را دریافت کند، سپس متن پنهان می شود.
• ضروری- این ویژگی یک شرط اجباری برای حضور اطلاعات در قسمت ورودی قبل از ارسال فرم تعیین می کند.

HTML5 همچنین معنای جدیدی برای ویژگی type دارد: type="search" . اما در مرورگرها به خوبی پشتیبانی نمی شود، بنابراین فعلا از آن استفاده نخواهیم کرد.

عناصر HTML مانند img و input محتوایی ندارند. بنابراین، یک شبه عنصر مانند :before هیچ فلشی برای دکمه نمایش نمی دهد.

راه حل این مشکل در مورد ما استفاده از دکمه type="submit" به جای input type="submit" است. بنابراین فرم را با استفاده از کلید ENTER نگه می داریم.

css

در زیر سبک های مورد نیاز برای نسخه ی نمایشی ما آمده است:

لغو بسته بندی متن

Cf:before، .cf:after( content:""; display:table; ) .cf:after(clear:both;) .cf(zoom:1;)

عناصر فرم

پیشوندهای مرورگر در کد درس برای وضوح بهتر نشان داده نمی شوند. می توانید کد کامل را در متن منبع مشاهده کنید.

/* شکل دادن به محفظه فرم */ .form-wrapper ( عرض: 450px؛ بالشتک: 15px؛ حاشیه: 150px خودکار 50px خودکار؛ پس‌زمینه: #444؛ پس‌زمینه: rgba(0,0,0,.2)؛ حاشیه-شعاع : 10px؛ box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); ) /* به کادر ورودی متن استایل دهید */ .ورودی form-wrapper ( عرض: 330 پیکسل؛ ارتفاع: 20 پیکسل؛ بالشتک: 10 پیکسل 5 پیکسل؛ شناور: چپ؛ قلم: پررنگ 15 پیکسل «lucida sans»، «trebuchet MS»، «Tahoma»؛ حاشیه: 0؛ پس‌زمینه: #eee؛ شعاع حاشیه: 3px 0 . webkit -input-placeholder ( رنگ: #999؛ وزن فونت: معمولی؛ سبک فونت: مورب؛ ) .ورودی فرم-wrapper:-moz-placeholder (رنگ: #999؛ وزن قلم: معمولی؛ سبک فونت: italic ; ) .form-wrapper input:-ms-input-placeholder ( color: #999; font-weight: normal; style-font: italic; ) /* دکمه ارسال فرم */ دکمه form-wrapper ( سرریز: قابل مشاهده است موقعیت: شناور نسبی: سمت راست. حاشیه: 0; بالشتک: 0; مکان نما: اشاره گر ارتفاع: 40 پیکسل؛ عرض: 110 پیکسل فونت: پررنگ 15px/40px "lucida sans"، "trebuchet MS"، "Tahoma"؛ رنگ: #fff; تبدیل متن: بزرگ; پس زمینه: #d83c3c; حاشیه-شعاع: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0,0, 0.3); ) .form-wrapper button:hover( background: #e54040; ) .form-wrapper button:active, .form-wrapper button:focus( background: #c42f2f; outline: 0; . * پیکان سمت چپ */ محتوا: ""؛ موقعیت: مطلق؛ عرض حاشیه: 8 پیکسل 8 پیکسل 8 پیکسل 0؛ سبک حاشیه: جامد جامد هیچکدام؛ رنگ حاشیه: شفاف #d83c3c شفاف؛ بالا: 12 پیکسل؛ سمت چپ: -6 پیکسل. ) .form-wrapper button:hover:before( border-right-color: #e54040; ) .form-wrapper button:focus:before, .form-wrapper button:active:before( border-right-color: #c42f2f; ) .form-wrapper button::-moz-focus-inner ( /* فضای اضافی کنار دکمه را در Mozilla Firefox حذف کنید */ حاشیه: 0؛ padding: 0; )