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

174 بازدید
جمعه ۲۹ مرداد ۱۳۹۵
نحوه حذف border یا Outline از فیلد های ورودی سایت در کرومReviewed by جواد نبوی on Aug 19Rating: 3.0

حذف border یا Outline از فیلد ها

شاید زمانی که در حال کدنویسی سایتی هستید به چنین مشکلی برخورده باشید. یعنی هر کاری میکنید تا حاشیه ی اطراف فیلد های ورودی در حالت تمرکز (focus) را از بین ببرید، نمیتوانید. این مشکل به خصوص در مرورگر گوگل کروم (Google Chrome) کار طراحان تازه کار را سخت کرده است. اگر چه ممکن است مشکل پیش پا افتاده ای به نظر برسد. اما برای خیلی ها همین مشکل به ظاهر ساده، شاید دردسر ساز شده باشد. پس اگر میخواهید این border یا outline را از اطراف فیلد های ورودی در حالت focus یا active از بین ببرید با این مطلب از وب تستر همراه باشید.

حذف border یا outline از فیلد های ورودی

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

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

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

برای حذف این حاشیه ها (outline) کافیست قطعه کد زیر را به فایل استایل خود اضافه کنید:

textarea:focus, input:focus, textarea:active, input:active{
 outline: none !important;
 border: none !important;
}

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

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

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *