<html> <head> <style> input:focus{border: 2px solid blue;} </style> </head> <body> <h1>Използване на focus за създаване на рамка</h1> <p>Тук ще възпроизведем един ефект, често използван във формата за влизане в пощенска кутия (yahoo, abv.bg и др.). Обърнете внимание на появата на синя рамка около активното поле за въвеждане на име или парола.</p> <form name="e-mail" action="css_focus.php" method="post"> Въведете Вашето име: <input type="text" name="name1"><br/> Въведете парола: <input type="text" name="password"><br/> <input type="submit" value="влез"> </form> <p>Можете да промените изгледа на активното поле като зададете вместо border, някое друго свойство, например фонов цвят - заместете "border: 2px solid blue;" с "background-color:pink;" в кода вляво. Разбира се, можете и да комбинирате два или повече ефекта.</p> <p>Целта на примера е да видите действието на псевдоклас focus, но ако все пак опитате да влезете в "пощенската си кутия" след въвеждане на име и парола, ще получите лично приветствие.</p> </body> </html>
Вашия резултат:
Опитай сам
CSS уроци:
www.parvisait.com