Создание крутого поля для поиска на CSS3
В этой статье, мы покажем вам рецепт приготовления крутой поисковой формы на CSS3 с применением HTML5 атрибута placeholder. Для того, чтобы оформление было одинаково во всех браузерах, мы будем использовать Modernizr.
Структура
Элемент form используется как контейнер, а 2 остальных элемента как поле для ввода информации и кнопки.
HTML
<form id="searchbox" action=""> <input id="search" type="text" placeholder="Введите текст"> <input id="submit" type="submit" value="Search"> </form>
Вы наверное заметили, что мы используем атрибут placeholder, но это сейчас не важно т.к. мы затронем эту тему позже.
Причина, по которой я вставил столько много id, заключается в том, что я хочу, чтобы данное оформление работало и в старых версиях браузеров.
CSS
#searchbox { background: #eaf8fc; background-image: -moz-linear-gradient(#fff, #d4e8ec); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff)); -moz-border-radius: 35px; border-radius: 35px; border-width: 1px; border-style: solid; border-color: #c4d9df #a4c3ca #83afb7; width: 500px; height: 35px; padding: 10px; margin: 100px auto 50px; overflow: hidden; /* Clear floats */ }
Ниже вы можете увидеть что у нас получается:
Поля ввода
Отметьте: когда вы добавляете элементу float: left, то вам не обязательно приписывать display: block.
#search, #submit { float: left; } #search { padding: 5px 9px; height: 23px; width: 380px; border: 1px solid #a4c3ca; font: normal 13px 'trebuchet MS', arial, helvetica; background: #f1f1f1; -moz-border-radius: 50px 3px 3px 50px; border-radius: 50px 3px 3px 50px; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); } /* ----------------------- */ #submit { background: #6cbb6b; background-image: -moz-linear-gradient(#95d788, #6cbb6b); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788)); -moz-border-radius: 3px 50px 50px 3px; border-radius: 3px 50px 50px 3px; border-width: 1px; border-style: solid; border-color: #7eba7c #578e57 #447d43; -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; height: 35px; margin: 0 0 0 10px; padding: 0; width: 90px; cursor: pointer; font: bold 14px Arial, Helvetica; color: #23441e; text-shadow: 0 1px 0 rgba(255,255,255,0.5); } #submit:hover { background: #95d788; background-image: -moz-linear-gradient(#6cbb6b, #95d788); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b)); } #submit:active { background: #95d788; outline: none; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } #submit::-moz-focus-inner { border: 0; /* Small centering fix for Firefox */ }
HTML5 атрибут placeholder
Атрибут placeholder предназначен для отображения текста в поле для текста до тех пор, пока на него не нажали. После клика, текст исчезнет, и пользователь может набирать то, что он хочет. Теперь для этих целей нам не нужен JavaScript!
Браузеры, которые поддерживают данный атрибут:
- Firefox 3.7+
- Safari 4.0+
- Chrome 4.0+
- Opera 11+
Для тех браузеров, которые поддерживают данную фичу, напишем следующий CSS код:
#search::-webkit-input-placeholder { color: #9c9c9c; font-style: italic; } #search:-moz-placeholder { color: #9c9c9c; font-style: italic; }
Поддержка
Для тех браузеров, которые ещё или уже не поддерживают атрибут placeholder, мы создаём специальный CSS и Javascript код, который спасёт ситуацию.
Я использую Modernizr для того, чтобы определить поддерживает ли браузер HTML5 атрибут placeholder или нет. Всё что нам понадобится так это написать небольшой фрагмент кода на JavaScript, а Modernizr уже решит в какой момент его задействовать.
#search.placeholder { color: #9c9c9c !important; font-style: italic; }
$(document).ready(function() { if (!Modernizr.input.placeholder) { var placeholderText = $('#search').attr('placeholder'); $('#search').attr('value',placeholderText); $('#search').addClass('placeholder'); $('#search').focus(function() { if( ($('#search').val() == placeholderText) ) { $('#search').attr('value',''); $('#search').removeClass('placeholder'); } }); $('#search').blur(function() { if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) ) { $('#search').addClass('placeholder'); $('#search').attr('value',placeholderText); } }); } });
Вывод
Что касается HTML5 атрибута placeholder, то если браузер его не поддерживает, то Javascript вступит в игру и сделает своё дело.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/hvduyZiQV6A/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Гораздо больше людей сдавшихся, чем побежденных. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.