border بدون border-width !!!؟؟؟
سوال جدیدسلام
در این صفحه لاگین :
https://codepen.io/akshat46/pen/VgOJYb
وقتی روی text input ها کلیک میکنیم یه border نارنجی رنگ ظاهر میشه. در حالی که border رو به این صورت داده :
border: solid #f8cb98;
و اصلا width رو تعیین نکرده. ابتدا کد هم border : none; گذاشته برای input ها . واقعا برام سواله که این border نارنجی از کجا ظاهر میشه؟؟؟
ممنون میشم کمک کنید.
سلام
در حالت خلاصه نویسی (shorthand) یک ویژگی ، اگر هر یک از مقادیر مربوط به آن ویژگی تعیین نشده باشه ، مقدار initial یا اولیه رو می گیره، در اینجا هم medium که مقدار اولیه border-width است برای آن در نظر گرفته می شود.
برای اینپوت ها در حالت کلی (عادی) مقدار border:none تعیین شده اما برای حالت focus استایل border ی که شما در سوالتون هم بهش اشاره کردین را در نظر گرفته، برای همین وقتی روی اینپوت کلیک میشه اون border نارنجی رنگ ظاهر میشه
این استایل برای حالت focus اینپوت مورد نظر به این صورت تنظیم شده
.auth-form:nth-child(1) input:focus {
border: solid #F8CB98;
}
در استایل بالا می بینید که برای border-width مقداری تعیین نشده ، برای همین مقدار اولیه که medium است را به خود می گیرد.
ولی اینجا اصلا برابر none قرار داده . حتی ۰ هم میدی هست اون border نارنجی هنوز هست.