Стилизуем textarea

Textarea это один из тех элементов, который редко кто обстиливает. Каждый браузер рендерит этот элемент по-своему. Вот поэтому я и предлгаю обстилить textarea так, что бы он выглядел одинаково во всех браузерах.

Вот что получится у нас в конце:

1-ый шаг: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;
}

Заметьте,что мы применяем стиль к textarea с id styled.

 

2-ой шаг:HTML

textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Ваш комментарий...

 

3-ий шаг:JavaScript

Как мы видим на onfocus и onblur вызывается некая JavaScript функция. Вот она:

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

Я думаю тут все предельно просто и понятно ;)
Пример стилизованного textarea

Случайные посты:
  1. CS2 Feather Icons - Icons
  2. Ambient
  3. SimpliSTIC

Оставьте свой отзыв!

XHTML:
Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>