Создание интересного поля ввода текста
10 декабря 2018 | Опубликовано в 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; }
В этом случае полю ввода текста с идентификатором #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
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191