Поле ввода текста — это элемент веб-страницы, в который можно вводить информацию. Эти элементы обычно используются для комментариев, форм обратной связи или полей для адреса. У всех браузеров по умолчанию применяются разные стили для полей ввода текста. Этим элементам можно задавать стили с помощью CSS так же, как и любому другому элементу:

textarea#styled {
        width: 600px;
        height: 120px;
        border: 3px solid #cccccc;
        padding: 5px;
        font-family: Tahoma, sans-serif;
        background-image: url(bg.gif);
        background-position: bottom right;
        background-repeat: no-repeat;
}

В этом случае полю ввода текста с идентификатором #styled заданы точные размеры высоты и ширины, а также рамка, внутренний отступ, семья шрифтов и фоновое изображение.

Поля ввода текста также поддерживают и другие функции, чтобы можно было контролировать их внешний вид в разных ситуациях. А именно, «onfocus» (в фокусе) и «onblur» (вне фокуса), которые можно применить строчно и задать команды javascript подобным образом:

<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter your comment here...</textarea>

Эта запись задаст изменение цвета фона поля ввода текста на светло-зеленый, когда оно активно, и возвращение к белому цвету при отсутствии активности. Просто подключите  небольшой скрипт ниже на веб-страницу — можно или создать файл .js и подключить его в заголовке или поместить его в тег <script type="text/javascript">:

function setbg(color)
{
document.getElementById("styled").style.background=color
}

Посмотрите, как это работает, на странице с примером.

Основные особенности этого поля ввода текста:

• Наличие текста по умолчанию, пропадающего при нажатии на поле ввода текста.

• Изменяет цвет фона, когда активен.

• Возвращается к цвету фона по умолчанию при отсутствии активности.

• С помощью кода CSS можно задавать стили шрифту, рамке, размеру, внутренним отступам и фоновому изображению.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание скругленной изнутри рамки
• Создание необычного разворачивающегося поля ввода текста
• Фоны, изменяющие положение в зависимости от движения указателя