طراحی فرم css. طراحی فرم مدرن با استفاده از CSS

در این مقاله چندین ترفند ارائه شده است که ممکن است نمی دانستید و در توسعه خود مفید خواهند بود.

1. تصویری به عنوان پس زمینه که هنگام وارد کردن متن ناپدید می شود.

شما می توانید اضافه کنید تصویر پس زمینهدرست مثل هر عنصر دیگری در این حالت، استایل پیش‌فرض برای ناحیه متنی از حاشیه ضخیم 1 پیکسل به حاشیه‌ای اریب تغییر می‌کند. این ثابت شده است نشانه صریحمرز.

Textarea ( پس‌زمینه: url(images/benice.png) مرکز بدون تکرار؛ حاشیه: 1px جامد #888؛ )

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

$("textarea") .focus(function() ($(this).css("پس زمینه"، "هیچکدام"); )) .blur(function() ( if ($(this).value == "" ) ( $(this).css("background", "url(images/benice.png) center no-repeat"); ) ));

2. جای جای در HTML5

HTML5 دارای ویژگی جدیدی به نام placeholder است. مقدار این ویژگی در نشان داده شده است عنصر متنو هنگام دریافت فوکوس و همچنین هنگام وارد کردن متن در عنصر ناپدید می شود.

متغیر HTML5 در مرورگرهای زیر پشتیبانی می شود: Safari 5، Mobile Safari، Chrome 6 و Firefox 4 alpha.

3. Placeholder، HTML5 با پشتیبانی از مرورگرهای قدیمی با استفاده از jQuery

ساده ترین راه برای بررسی اینکه آیا یک ویژگی توسط مرورگر پشتیبانی می شود، بررسی با استفاده از جاوا اسکریپت است:

تابع elementSupportsAttribute(عنصر، ویژگی) ( var test = document.createElement(element)؛ return (ویژگی در تست)؛ );

سپس می توانید کدی بنویسید که اگر مرورگر از ویژگی placeholder پشتیبانی نکند، فعال می شود.

اگر (!elementSupportsAttribute("textarea", "placeholder")) (// اگر مرورگر از ویژگی پشتیبانی نمی کند، کد jQuery اجرا می شود $("#example-three") .data("OriginalText", $( "#example-three ").text()) .css("color", "#999") .focus(function() ( var $el = $(this)؛ if (this.value == $el. data("originalText" )) ( this.value = ""; ) )) .blur(function() ( if (this.value == "") ( this.value = $(this).data("originalText" ); ) )) ; ) else (// اگر مرورگر از HTML5 پشتیبانی می کند، به سادگی از این ویژگی استفاده کنید $("#example-three") .attr("placeholder", $("#example-three").text( )) .text("");)

4. Stroke ناحیه بافتی را حذف کنید

مرورگرها در موتورهای کیت وب و همچنین فایرفاکس 3.6، وقتی که فوکوس دارد، محدوده متن را مشخص می کند. می توانید این طرح کلی را با استفاده از ویژگی outline css برای مرورگرهای وب کیت حذف کنید. برای فایرفاکس، از ویژگی -moz-appearance استفاده کنید، یا می توانید به سادگی عنصر را روی یک حاشیه یا پس زمینه تنظیم کنید.

Textarea (طرح کلی: هیچ؛ -moz-appearance: هیچ؛ مرز: 1px جامد #999؛ /* با تنظیم این ویژگی، طرح کلی در فایرفاکس */ نیز حذف می شود)

5. ممنوعیت تغییر اندازه

مرورگرهای Webkit یک عنصر بصری به ناحیه متنی در گوشه سمت راست پایین اضافه می کنند که به شما امکان می دهد اندازه ناحیه متن را تغییر دهید. اگر می خواهید این ویژگی را حذف کنید، باید از ویژگی css زیر استفاده کنید:

Textarea (تغییر اندازه: هیچ، )

6. اضافه کردن قابلیت تغییر اندازه

jQuery UI به شما امکان می دهد قابلیت های تغییر اندازه را به textarea اضافه کنید. این برای همه مرورگرها کار می کند و برای مرورگرهای وب کیت رفتار پیش فرض را لغو می کند. برای استفاده از این قابلیت باید jquery.ui را متصل کرده و کد زیر را بنویسید:

$("textarea").resizable();

7. اندازه را متناسب با محتوا تغییر دهید

جیمز پادولسی یک اسکریپت مفید جی کوئری نوشت که به شما امکان می‌دهد تا اندازه یک ناحیه متنی را به‌طور خودکار با محتوای آن تغییر دهید. به نظر می رسد این افزونه دیگر در دسترس نیست، اما برای مثال می توانید از این افزونه استفاده کنید. این افزونه دارای تنظیمات زیادی است، اما ساده ترین راه برای استفاده از آن این است:

$("textarea").autoResize();

8.Nowrap

برای جلوگیری از قرار دادن کلمات در خطوط جدید، همه عناصر از ویژگی CSS فضای سفید استفاده می کنند که با textarea کار نمی کند. برای textarea باید از ویژگی wrap استفاده کنید.

9. حذف نوارهای اسکرول در IE

IE یک نوار اسکرول عمودی را برای همه مناطق متنی نشان می دهد. می‌توانید با استفاده از Overflow: hidden آنها را پنهان کنید، اما در این حالت وقتی محتوا بزرگ می‌شود نشان داده نمی‌شود. بنابراین، استفاده از روش زیر صحیح تر است:

Textarea (سرریز: خودکار؛ )

در این حالت وقتی تمام متن در قسمت متن قرار می گیرد، نوار اسکرول نمایش داده نمی شود، اما در صورت لزوم نمایش داده می شود.

می توانید نمونه هایی را برای مقاله مشاهده کنید.

به دلیل مشکل استایل کردن فیلد ورودی، قبلاً تعداد کمی از نسخه‌های توسعه‌دهنده فرانت‌اند شکسته شده‌اند. ورودی. اصل مشکل این است که مشخصات HTML قوانین دقیقی برای تعیین نحوه نمایش این عنصر توسط مرورگر ندارد. علاوه بر این، برای ورودیهیچ ویژگی ای وجود ندارد که به شما امکان تغییر آن را بدهد ظاهر، با استفاده از سبک های CSS فقط می توانید ظاهر حاشیه و فونت آن را تغییر دهید و با استفاده از جاوا اسکریپت به دلایل امنیتی نمی توانید کلیک روی این عنصر را شبیه سازی کنید که باعث می شود پنجره سیستمبرای انتخاب یک فایل * . اما وقتی مشتری یک وب سایت واکنش گرا با فرم های سبک زیبا می خواهد که بدون این فیلد ورودی نمی تواند انجام دهد، چه باید کرد؟

* - در زمان نوشتن این مقاله، من هنوز نمی دانستم که قبلاً چه چیزی وجود دارد مرورگرهای مدرنشبیه سازی شده کلیک کنید ورودیپنجره انتخاب فایل سیستم را فراخوانی می کند. با تشکر فراوان از lutov برای نظر ارزشمند شما با پیوند به نمونه کاری از Pagefest!

راه هایی برای حل مشکل استایل سازی زمینه

تا زمانی که این مشکل وجود داشته است (و از مدت ها قبل وجود داشته است) چندین راه برای حل آن پیدا شده است. در مجموع پنج مورد از آنها وجود دارد:

روش شماره 1 (متداول ترین)

مشتری را متقاعد کنید که می توانید با استانداردها زندگی کنید ورودی.

روش شماره 2

نوشتن/استفاده از یک بارکننده فایل آماده در یک اپلت فلش/جاوا. برای مثال در habrastorage.org استفاده می شود

روش شماره 3 (در مقاله مورد بحث قرار خواهد گرفت)

از CSS برای پنهان کردن استاندارد استفاده کنید ورودی، آن را کاملا شفاف کرده و در جای فیلد جعلی استایل شده قرار دهید تا با کلیک بر روی دومی، روی مورد استاندارد کلیک کنید و در نتیجه پنجره انتخاب فایل سیستم باز شود.

روش شماره 4 جدید!(در مقاله مورد بحث قرار خواهد گرفت)

شفاف قرار دهید ورودیداخل عنصر برچسب، همراه با عناصر درون خطی استایل دلخواه (البته به جز ورودی، دکمه، انتخاب و ناحیه متنی). کلیک کردن روی برچسب به طور خودکار منجر به کلیک بر روی فیلد پنهان برای انتخاب یک فایل می شود. با تشکر از شما lampa برای نظر ارزشمند شما!

روش شماره 5 جدید!(در مقاله مورد بحث قرار خواهد گرفت)

از کلیک شبیه سازی شده روی hidden استفاده کنید ورودیبا استفاده از جاوا اسکریپت بله، این در حال حاضر در تمام مرورگرهای مدرن کار می کند. باز هم از lutov برای نظر ارزشمند شما متشکرم!
UPD: توجه، این روش برای مرورگر قابل اجرا نیست اینترنت اکسپلورر! حتی اگر فایل به صورت مخفی انتخاب شده باشد ورودی، هنگام ارسال فرم، مقدار دومی "ریست" می شود. با تشکر LeonidFrolov برای نظر ارزشمند شما!

هر چهار روش آخر البته معایبی دارند. ضرر قابل توجهمشکل راه حل های Flash/Java این است که عملکرد آنها به پلاگین های مناسب نیاز دارد که ممکن است در مرورگر کاربر موجود نباشد. عیب بزرگراه حل "استتار" این است که برای اجرای آن باید از هک استفاده کنید (در این مورد صحبت خواهیم کردزیر)، و همچنین به این دلیل که بدون معنی است با استفاده از جاوا اسکریپت(بالاخره، شما باید به نحوی بین حالت های "فایل انتخاب نشده" و "فایل انتخاب شده" برای یک فیلد جعلی استایلیزه شده تمایز قائل شوید، که انجام آن به تنهایی با CSS غیرممکن است). یک راه حل در جاوا اسکریپت، به طور کلی، بسیار خوب خواهد بود، اما، همانطور که در عمل مشخص شد، پشتیبانی نمی شود مرورگر اینترنت Explorer، همانطور که در بالا ذکر شد. نقطه ضعف راه حل با استفاده از برچسب همین استفاده از جاوا اسکریپت است، با این حال، از روش "ماسک کردن" بسیار بهتر است و به نظر من اکنون باید برای حل این مشکل حاد استفاده شود.

نمودار دوچرخه

وظیفه اصلی ایجاد "لاستیک" بود ورودی، که روی نمایشگرها قرار دارد دستگاه های تلفن همراهیک دکمه ساده برای انتخاب یک فایل خواهد بود (نام فایل انتخابی روی آن نمایش داده می شود) و در صفحه های گسترده مانند یک فیلد متنی + دکمه آشنا برای همه به نظر می رسد که می تواند در کل عرض آن کشیده شود. پنجره:

نمای شماتیک عنصر در دستگاه های تلفن همراه

نمای شماتیک عنصر در دستگاه های رومیزی

در این مقاله سه مورد بحث خواهد شد جدیدترین روش هااستایل کردن فیلد انتخاب فایل بنابراین، با در نظر گرفتن طرح فوق، طرح اولیه روش شماره 3 "استتار" به این صورت خواهد بود (ترتیب عناصر فرزند مهم است!):

طرح بندی ممکن برای روش با استفاده از عنصر برچسب:
انتخاب کنید فایل انتخاب نشد

طرح‌بندی ممکن برای یک راه‌حل در جاوا اسکریپت (همان طرح‌بندی روش «استتار»):

"کشش، خوکچه!" یا سبک هایی برای روش "استتار".

برای جلوگیری از برداشت اشتباه خواننده مبنی بر اینکه هر مقدار ویژگی CSS استفاده شده در مقاله از اهمیت بالایی برخوردار است (به اصطلاح "اعداد جادویی")، ما موافقت می‌کنیم که آن‌هایی را که می‌توان با خیال راحت مطابق با نیازهای شما تغییر داد، با یک نظر علامت‌گذاری کرد.

/* مثال */

موافق؟ عالی! بیایید شروع به طراحی فیلد انتخاب فایل جعلی خود با "wrapper" - div کنیم فایل_آپلود:

File_upload( موقعیت: نسبی؛ سرریز: پنهان؛ اندازه قلم: 1em؛ /* مثال */ ارتفاع: 2em؛ /* مثال */ ارتفاع خط: 2em /* همان ارتفاع */ )
- خاصیت position طوری تنظیم شده است که نسبت به div فایل_آپلودکاملاً ممکن بود آن را در موقعیت قرار دهید عناصر کودک، و خاصیت سرریز به این منظور است که همه چیزهایی را که به دلایلی در لفاف ما نمی گنجد پنهان کنیم (و چنین چیزی وجود دارد ، اما بعداً در مورد آن بیشتر توضیح خواهیم داد). در صفحه های گسترده، فیلد و دکمه زیبای ما باید در یک خط نمایش داده شود - بیایید آن را برای دومی تنظیم کنیم عرض ثابتو شناور: راست، و برای اول - یک بالشتک کوچک:

File_upload > button( شناور: راست؛ عرض: 8em؛ /* مثال */ ارتفاع: 100٪) .file_upload > div( padding-left: 1em /* مثال */ )
از آنجایی که می‌خواهیم فیلد متن در دستگاه‌های تلفن همراه پنهان شود و فقط یک دکمه انتخاب فایل باقی بماند، باید تنظیم کنیم پرس و جو رسانه ای:
صفحه فقط رسانه @ و (حداکثر عرض: 500 پیکسل)( /* مثال */ .file_upload > div( نمایش: هیچکدام) .file_upload > دکمه (عرض: 100٪))
خوب، اکنون - قسمت سرگرم کننده این روش! لازم است استانداردی تهیه شود ورودیکاملاً شفاف است و آن را به اندازه ی "wrapper" div گسترش دهید فایل_آپلود. برای اجرای دومی، یک هک در فرم اعمال می کنیم موقعیت یابی مطلقو ویژگی های تبدیل CSS 3، که با آن عنصر را مثلاً 20 برابر افزایش می دهیم (بله، این رایج ترین است " عدد جادویی»):
.file_upload ورودی( موقعیت: مطلق؛ چپ: 0؛ بالا: 0؛ عرض: 100%؛ ارتفاع: 100%؛ تبدیل: scale(20؛ فاصله حروف: 10em؛ /* IE 9 fix */ -ms-transform : scale(20)؛ /* IE 9 fix */ opacity: 0; cursor: pointer )
همانطور که از قطعه CSS بالا می بینید، IE 9 نیاز به تغییرات اضافی داشت. این به دلیل این واقعیت است که این مرورگروقتی روی یک فیلد متنی کلیک می‌کنید، پنجره انتخاب فایل سیستم را فراخوانی نمی‌کند، اما با مهربانی پیشنهاد می‌کند نام موردی که قبلاً انتخاب شده است را پاک کنید، که نماد آن یک چشمک زدن است. مکان نما متن. بنابراین، یک فاصله بزرگ بین حروف علاوه بر آن برای آن در نظر گرفته شده است که دکمه عنصر را به اندازه یک div افزایش می دهد. فایل_آپلود. همچنین اشاره می کنم که z-index in در این موردنشان داده نشده است، زیرا عنصر آخر می آید"فرزند" در نشانه گذاری انتخاب شده از همان ابتدا.

با استفاده از مثال دسکتاپ مرورگر فایرفاکس، اکنون فیلد انتخاب فایل سفارشی ما برای اندازه های متفاوتپنجره به این شکل است:

"همه چیز مبتکرانه ساده است!" یا سبک برای روش برچسب

سبک های اساسی اعمال می شود فیلد متنیو یک دکمه، برای این روش مشابه مواردی است که قبلاً در بالا توضیح داده شد:

File_upload( نمایش: بلوک؛ موقعیت: نسبی؛ سرریز: پنهان؛ اندازه قلم: 1em؛ /* مثال */ ارتفاع: 2em؛ /* مثال */ ارتفاع خط: 2em /* همان ارتفاع */) .file_upload .button،. : 8em؛ /* مثال */ ارتفاع: 100٪؛ تراز متن: مرکز /* مثال */ ) .file_upload > mark( پس زمینه: شفاف؛ /* مثال */ padding-left: 1em /* مثال */ )
با این حال، اکنون دیگر نیازی به استفاده از هک برای "کشش" شفاف نیست ورودی:

ورودی فایل_آپلود (موقعیت: مطلق؛ بالا: 0؛ کدورت: 0)

"چگونه کار می کند؟" یا سبک هایی برای راه حل جاوا اسکریپت

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

ورودی فایل_آپلود (موقعیت: مطلق؛ بالا: 0؛ دید: پنهان)

به سبک های بیشتری نیاز دارید!

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

/* زیبا کردن */ .file_upload( حاشیه: 1px جامد #cccc؛ حاشیه-شعاع: 3px؛ box-shadow: 0 0 5px rgba(0,0,0,0.1)؛ انتقال: box-shadow 0.1s خطی) .file_upload.focus( box-shadow: 0 0 5px rgba(0,30,255,0.4) ) .file_upload > button( background: #7300df; transition: background 0.2s; border: 1px solid rgba(0,0,0,0.1 رنگ حاشیه: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)؛ حاشیه: 2px؛ box-shadow: 0 1px 0 rgba(255، 255، 255، 0.2)، 0 1px 2px rgba(0، 0، 0، 0.05)؛ رنگ: #fff؛ text-shadow: #6200bd 0 -1px 0؛ سرریز: پنهان؛ فضای سفید: nowrap؛ متن سرریز: بیضی ) .file_upload:hover > button( پس زمینه: #6200bd؛ text-shadow: #5d00b3 0 -1px 0 ) .file_upload:active > button( پس زمینه: #5d00b3؛ box-shadow: 0 0 3px rgba(0,0,0,0.3) inset )

حالا فیلد انتخاب فایل ما به شکل زیر است:

نیاز به عصا بیشتر!

از آنجایی که ما در حال ایجاد یک فیلد کامل برای انتخاب یک فایل هستیم، باید مطمئن شویم که می توان آن را به راحتی از صفحه کلید پر کرد (برای روش "پوشاندن"، اکنون فوکوس ابتدا روی دکمه سبک تنظیم شده است، و سپس به پنهان ورودی، که به هیچ وجه از نظر بصری متجلی نمی شود). البته برای این کار از جاوا اسکریپت استفاده می کنیم. برای جلوگیری از نوشتن کدهای زیاد، از کتابخانه محبوب jQuery استفاده می کنم. سپس، برای روش "استتار":

Var wrapper = $(".file_upload")، inp = wrapper.find("input")، btn = wrapper.find("button")، lbl = wrapper.find("div"); btn.focus(function())(inp.focus() )); // عصا برای سبک: فوکوس: inp.focus(function())( wrapper.addClass("focus"); )).blur(function())( wrapper.removeClass("focus"); ));
برای روشی که از برچسب استفاده می کند، می توانید بخشی از کد را که مسئول فوکوس اجباری است از دکمه به حذف کنید ورودی(از آنجایی که ما اصلاً دکمه ای در آنجا نداریم، بلکه یک دهانه داریم).

برای روشی که ماهیت آن شبیه سازی کلیک بر روی آن است ورودی، در واقع باید این تقلید را اضافه کنید:

// بله، کار می کند! btn.add(lbl).click(function())(inp.click(); )); و همچنین کد را برای تنظیم کلاس تنظیم کنید .تمرکز، قبلاً قطعه مسئول انتقال فوکوس اجباری را حذف کرده باشید:
// عصا برای سبک: فوکوس: btn.focus(function())( wrapper.addClass("focus"); )).blur(function())( wrapper.removeClass("focus"); ));

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

Var file_api = (window.File && window.FileReader && window.FileList && window.Blob) ? درست غلط؛ inp.change (تابع ("C:\\fakepath\\", "")؛ if(! file_name.length) بازگشت؛ if(lbl.is(":visible"))( lbl.text(file_name); btn.text("انتخاب کنید " ); )else btn.text(file_name); )).change();
- اگر مرورگر از File API پشتیبانی می کند، نام فایل با استفاده از آن تعیین می شود، در غیر این صورت از مقدار پنهان حذف می شود. ورودی. برای دستگاه های تلفن همراه، زمانی که عنصر یک دکمه باشد، نام فایل انتخابی روی آن نمایش داده می شود.

به نظر می رسد که هر آنچه لازم است قبلاً نوشته شده است. و این مجسمه ها هستند! اگر فایلی را با استفاده از فیلد "موبایل" انتخاب کنید و سپس اندازه پنجره را افزایش دهید و عنصر را به "دسک تاپ" منتقل کنید، "فایل انتخاب نشده" در قسمت متن باقی می ماند - هر بار که تغییر می دهید باید عنصر را به روز کنید. اندازه پنجره:
$(window).resize(function())($(.file_upload input").triggerHandler("تغییر"); ));

و در نهایت چه چیزی به دست آوردیم؟

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

• فایرفاکس 22.0 (لینوکس، ویندوز)
• Opera 12.16 (لینوکس، ویندوز)
• اینترنت اکسپلورر 9
• Chromium 27.0 (Linux)
• Apple Safari (iOS 6.3.1)
• مرورگر اندروید (اندروید 2.3.6)
• اندروید فایرفاکس

از مزایای تمام رویکردهای مورد بحث در مقاله، موارد اصلی زیر را می توان شناسایی کرد:

• فلش استفاده نمی شود.
• این عنصر را می توان به راحتی مدل داد با استفاده از CSSاستفاده كردن فن آوری های مدرنطراحی تطبیقی
• فیلد را می توان با استفاده از صفحه کلید نیز پر کرد.

از معایب اصلی:

• نیاز به استفاده از جاوا اسکریپت (برای همه روش ها صدق می کند).
• استفاده از هک های CSS برای پنهان کردن چیزها.
• نیاز به نوشتن عصای زیر بغل اضافی برای یک میدان با یک ویژگی چندگانه(برای همه روش ها صدق می کند).
• غیر متقابل مرورگر - همه روش ها فاقد پشتیبانی از IE 8 هستند، و همچنین باید از ویژگی های CSS "مرورگر" برای پشتیبانی از بقیه "قدیمی ها" استفاده کنید.
• راه حل جاوا اسکریپت توسط همه پشتیبانی نمی شود نسخه های اینترنتی Explorer، و همچنین برخی از نسخه های قدیمی دیگر مرورگرهای محبوب(اگرچه تقریباً هیچ کس دیگر از آنها استفاده نمی کند).

کدام یک از این سه دو روش زیبا برای ایجاد یک سبک است ورودیبرای انتخاب کنید استفاده روزمره- تو تصمیم بگیر. انتخاب من روشی است که از برچسب استفاده می کند (حتی اگر یک طرح غیر معنایی داشته باشد).

نمونه های کاری هر سه روش را می توان در CodePen یافت.

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

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

نمونه ای از کاربرد آنها را مشاهده می کنید.

:placeholder-show

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

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

.form-group ( موقعیت: نسبی؛ padding-top: 1.5rem; ) label ( موقعیت: مطلق؛ بالا: 0؛ اندازه قلم: var(--اندازه قلم-کوچک)؛ کدورت: 1؛ تبدیل: translateY( 0)؛ انتقال: همه 0.2s ease-out؛ ) ورودی:placeholder-show + label ( opacity: 0; transform: translateY(1rem)؛ )

از این انتخابگر برای نشان دادن اینکه یک فیلد دارای ویژگی است استفاده کنید. در اینجا من از یک فاصله خالی با کلاس help-text استفاده می کنم و با استفاده از عنصر شبه ::before مقداری محتوا را به صورت پویا قرار می دهم. در واقع، این کار را می توان با جاوا اسکریپت انجام داد، اما من این مثال را برای نشان دادن روش با استفاده از CSS خالص آورده ام.

ورودی مورد نیاز input:required + .help-text::before ( محتوا: "*الزامی"؛ )

در مقایسه با موارد مورد نیاز، این انتخابگر برعکس عمل می کند. من دوباره از یک فاصله خالی با کلاس help-text استفاده می‌کنم تا در صورت عدم وجود ویژگی، متن احتمالی را نشان دهم.

ورودی: اختیاری + .help-text::before ( محتوا: "*اختیاری"؛ )

این یکی باید برای اکثر شما آشنا باشد، اما مهم است که به خاطر بسپارید. نشان دادن قفل بودن فیلد برای کاربر بسیار مهم است.

&:غیرفعال (رنگ حاشیه: var(--خاکستری-روشن تر؛ پس زمینه-رنگ: var(--خاکستری-روشن ترین؛ رنگ: var(--خاکستری-نور)؛ )

:فقط خواندنی

ورودی با ویژگی فقط خواندنی باید معنای کمی متفاوت از . خوب است که چنین انتخاب کننده ای برای این منظور وجود دارد.

ورودی: فقط خواندنی (رنگ حاشیه: var(--خاکستری-روشن تر)؛ رنگ: var(--خاکستری)؛ مکان نما: مجاز نیست؛ )

:معتبر

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

در اینجا من در حال نوشتن کدی برای یک svg هستم تا از ویژگی background-image برای نمایش یک علامت در فیلد ورودی استفاده کند.

ورودی: معتبر ( border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke=" هیچ" stroke-width="1" fill="هیچ" fill-rule="evenodd"%3E%3Cg transform="translate%28-56.000000, -59.000000%29" fill="%232EEC96"%3E%3Cpolygon نقاط ========================================================================================= 3C/g%3E%3C/g%3E%3C/svg%3E%0A")؛ )

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

یک بار دیگر من کدی را برای svg اضافه می کنم تا "X" را در قسمت ورودی نمایش دهد.

Input:invalid ( border-color: var(--color-error); background-image: url("data:image/svg+xml,%3Csvg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg stroke=" هیچ" stroke-width="1" fill="هیچ" fill-rule="evenodd"%3E%3Cg transform="translate%28-128.000000, -59.000000%29" fill="%23F44336"%3E%3Cpolygon نقاط ============================================================================== 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.978.142.978. 59"%3E%3C/چند ضلعی%3E%3C/g%3E%3C/g%3E%3C/ svg%3E%0A")؛

همچنین می توانید برخی از پیام های تأیید را برای هر کدام پیکربندی کنید ورودی را تایپ کنید، با استفاده از یک span با کلاس help-text و ::before شبه عنصر.

ورودی نامعتبر input:invalid + .help-text::before ( محتوا: "باید یک ایمیل معتبر وارد کنید." )

:in-range/:خارج از محدوده

این انتخابگرها تعیین می کنند که آیا مقدار است یا خیر فیلد شمارهدر حداقل/حداکثر مقادیر مشخص شده

ورودی خارج از محدوده (مقدار باید بین 1 تا 10 باشد) input:out-of-range + .help-text::before ( محتوا: "خارج از محدوده"؛ )

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

من ورودی را به صورت بصری پنهان می کنم تا از دید ناپدید شود اما همچنان قابل کلیک باشد. سپس استایل label::before را به شکل چک باکس و label::after را مانند علامت چک می دهم. من از یک انتخابگر برای استایل دادن به این دو شبه عنصر استفاده می کنم.

&:checked + label::prefore ( پس زمینه-رنگ: var(--color-primary); ) &:checked + label::after (نمایش: بلوک؛ موقعیت: مطلق؛ بالا: 0.2rem؛ سمت چپ: 0.375rem; عرض: 0.25rem؛ ارتفاع: 0.5rem؛ حاشیه: سفید یکدست؛ حاشیه: 0 2px 2px 0؛ تبدیل: چرخش (45 درجه؛ محتوا: ""؛ )