x
<html><head><style>input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 3px solid #ccc; transition: 0.5s; transition: 0.5s; outline: none;}input[type=text]:focus { border: 3px solid #555;}</style></head><body><p>В этом примере мы используем селектор :focus, чтобы добавить черный цвет границы к текстовому полю, когда на нём фокус (кликнуто):</p><p>Обратите внимание, что мы добавили CSS свойство transition для анимации цвета границы (изменение цвета в фокусе занимает 0,5 секунды).</p><form> <label for="fname">Имя</label> <input type="text" id="fname" name="fname" value="John"> <label for="lname">Фамилия</label> <input type="text" id="lname" name="lname" value="Doe"></form></body></html>