نحوه حذف border یا Outline از فیلد های ورودی سایت در کروم

ن

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

فیلدهای ورودی

چرا این border یا outline ها به وجود می آیند؟

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

حذف حاشیه ها از input

کد زیر را در فایل استایل خود قرار دهید تا به طور کلی از شر این حاشیه ها یا outline راحت شوید.

این کد بسیار جامع و کامل می باشد. و اگر در جاهای دیگری نیز برای فیلد های input حاشیه ای وجود داشته باشد ، این کد های نوشته شده در بالا همه را حذف می کند. اگر برای فیلد input  خود رنگ خاصی مد نظرتان می باشد ، می بایست از کد بالا importamt! را حذف کنید و برای آن حاشیه مورد نظر خود important!  مخصوص به ان را تعریف کنید.

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

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)