خط حاشیه فیلدها و تمرکز بر روی فیلد
بازگشت به صفحه اصلی
بازگشت به صفحه مقاله
دو ستونی
دو سطری
اجرای کد RUN »
<!DOCTYPE html> <html> <head> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 3px solid #ccc; -webkit-transition: 0.5s; transition: 0.5s; outline: none; } input[type=text]:focus { border: 3px solid #555; } </style> </head> <body> <p dir="rtl">در این مثال از سلکتور focus: برای اضافه کردن خط حاشیه مشکی به فیلد متنی استفاده کرده ایم تا به هنگام کلیک شدن بر روی ان ، زنگ خط حاشیه تیره تر به نشانه انتخاب شدن آن فیلد ، نمایش داده شود :</p> <p dir="rtl">توجه داشته باشید که از صفت transition در CSS3 استفاده کرده ایم تا رنگ خط حاشیه به مرور تغییر کند (نیم ثانیه طول میکشد تا رنگ خط حاشیه تغییر کند).</p> <form dir="rtl"> <label for="fname">نام</label> <input type="text" id="fname" name="fname" value="حامد"> <label for="lname">نام خانوادگی</label> <input type="text" id="lname" name="lname" value="معز"> </form> </body> </html>