اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <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> <h2>فیلدهای input که به هنگام فوکوس، کادرشان سیاه می شود</h2> در اینجا، فیلد input وقتی که فوکوس را دریافت می کند(روی آن کلیک می شود) کادرش سیاه می شود. ما همچنین از ویژگی transition در CSS برای متحرک سازی رنگ کادر استفاده کرده ایم( نیم ثانیه طول می کشد تا رنگ کادر به هنگام فوکوس تغییر کند). </p> <form> <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>
