Joomla! Україна

Блоги — цікаві статті та записи про Joomla, програмування, верстку та інше.
  • Версія Joomla! від 13.08.2019
  • 1229 користувачі
  • 60 записи в блогах
  • 788 новини та статті
     

Підсвітка елементу за допомогою onFocus

04.08.2007, 17:25 |  Прочитано: 10084 раз  |  CSS та верстка  |  Автор: Денис Носов Друк|E-mail

(0 голоси)

Як підсвітити форми, яку заповнює користувач, наприклад, відписуючи листа з контактної форми?
Для чого це потрібно?
На ці питання ми отримаємо відповідь, використовуючи CSS.

В CSS є правила для різних станів посилань, такі як: :link :visited :hover :active. Ці стани посилань відображають, підкреслюють, виділяють посилання. А для того, щоб виділити елемент на момент взаємодії користувача із ним використовується стан :focus.

Для прикладу ми візьмемо контактну форму, яка буде виглядати таким чином:

Демо версія

Ім'я:

Email:

Повідомлення:

Отже, ми бачимо, що поля підсвічуються світло жовтим кольором.

А тепер приведемо код для HTML та CSS:

Код для HTML:

<form>
    <p>Ім`я:<br />
    <input type="text" size="40"></p>

    <p>Email:<br />
    <input type="text" size="40"></p>

    <p>Повідомлення:<br />
    <textarea rows="5" name="comments" cols="45" wrap="virtual"></textarea></p>

    <p><input id="actualsubmit" type="submit" value="Надіслати"></p>
</form>

Код для CSS:

input:focus, textarea:focus {
	background-color: lightyellow;
}