Текстовое поле HTML — оригинальное оформление текстового поля HTML

На сайте находится сотни статей, в которых описывается как придать красивые стили для тех или иных элементов страницы. Данная коллекция постоянно пополняется. Ведь постоянно появляются новые возможности и место для экспериментов. На этот раз я хочу обратить внимание на текстовое поле HTML. Его можно сделать очень привлекательным. Лучше сами лично протестируйте данное поле.

Этот эффект достаточно интересный, но на сайте есть и другие способы оформления текстового поля:

• Красивое оформление полей для ввода с помощью jQuery

Как это выглядит смотрите на реальном примере:

Посмотреть примерСкачать

Выглядит очень интересно и необычно для текстового поля, правда? Давайте посмотрим как же установить данный эффект на свой сайт.

Как сделать такой эффект для текстового поля HTML?

HTML часть

Подключаем необходимые стили (fancyInput.css) и скрипты (jquery и fancyInput.js):

1
2
3

<link rel="stylesheet" href="css/fancyInput.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='js/fancyInput.js'></script>

После чего необходимо ОБЯЗАТЕЛЬНО поместить тег <input> или <textarea> </textarea> внутрь тега <div>:

1
2
3
4
5
6

<div>
    <input type='text' placeholder='Введите текст...'>
</div>
<div>
    <textarea cols='1'></textarea>
</div>

jQuery часть

Чтобы всё заработало в конце документа HTML добавляем вызов функции плагина fancyInput:

1
2
3

<script>
    $('div :input').fancyInput();
</script>

На этом установка плагина fancyInput для оформления текстовых полей HTML закончена.

Вывод

А как Вам идея использовать данный эффект на продающей странице? Также можно таким образом оформить форму комментирования у себя на сайте. Конечно, установка не из простых и, возможно, сразу у Вас всё не заработает, но эффект стоит того, чтобы потратить на него время.

Успехов!

С Уважением, Юрий Немец