Главная » Верстка » CSS textarea — добавляем фон в поле ввода textarea

CSS textarea — добавляем фон в поле ввода textarea

Опубликовано: 07-08-2010 | Автор : Vch54ti

0

Tweet

css_texarea_01

Пару раз у меня спрашивали как сделать подобную надпись в поле ввода textarea, по этому я решил опубликовать решение здесь.

На самом деле — все очень просто — такая надпись делает как фоновое изображение для поля ввода textarea посредством CSS. Ниже показываю пример кода 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;
}
По сути выше указан практически тот же самый код, что я использую у себя на этом блоге — по этому в качестве примера можете посмотреть texarea в форме отправки комментариев.
Дополнительно можно еще добавить надпись «Введите свой комментарий», которая будет исчезать когда произойдет клик на форму texarea:

<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Введите свой комментарий...</textarea>
Так что, как видите — все сводится к тому, что вешается фоновое изображение на форму texarea… Фоновое изображние думаю при желании — найдется ;)
  • P.S. спонсор написания данной статьи сайт code-guru.ru — статьи по программированию и примеры программного кода. И помните — везде свой формат файлов.

Спасибо Вам за добавление статьи "CSS textarea — добавляем фон в поле ввода textarea" в:

Добавить в Twitter
Если данная публикация вам понравилась, предлагаю вам подписаться на получение материалов centavrus-opti.ru через RSS ленту, и при желании присоединиться ко мне в Twitter
Рассылка новых публикаций на E-mail

Предлагаю оставить комментарий к записи CSS textarea — добавляем фон в поле ввода textarea

Более ранние статьи из раздела