Чистый стиль формы CSS3 становится все более популярным. Он имеет свои недостатки, но увеличение времени загрузки от традиционной JS наложения впустую десятых секунд, когда речь идет об оптимизации, чтобы максимизировать для всей аудитории. Большинство форм довольно прямо вперед и использовать только входы и текстовые области, а не радио и чек-боксы, которые создают свои собственные проблемы.
Пример кода ниже лишь небольшая выборка того, что вы могли бы сделать. Не бойтесь добавлять фоновые градиенты или цвет в форму. Я сосредотачиваюсь на стандартный серый вид для большинства элементов, поскольку он удовлетворяет более широкую аудиторию, чем цвет конкретных. Вы можете поиграть с тенью и фоновый цвет, чтобы добавить совершенно другой вид на ваш сайт. Если у вас есть темный веб-сайт, я предлагаю заменить код формы CSS, чтобы смешаться и поп на темном фоне. Просто добавьте этот CSS в свой стиль листа мгновенно стиль любой форме.
входные данные
обивка: 10px;
-вебкит-граница-радиус: 4px;
-khtml-граница-радиус: 4px;
-моз-граница-радиус: 4px;
радиус границы: 4px;
-webkit-коробка-тень: 0 0 5px #444;
-moz-коробка-тень: 0 0 5px #444;
коробка-тень: 0 0 3px #444;
граница: 1px твердых #fff;
}
textarea
обивка: 15px;
граница: 1px твердых #fff;
-вебкит-граница-радиус: 4px;
-khtml-граница-радиус: 4px;
-моз-граница-радиус: 4px;
радиус границы: 4px;
-webkit-коробка-тень: 0 0 5px #444;
-moz-коробка-тень: 0 0 5px #444;
коробка-тень: 0 0 10px #444;
}
вх[type="text"]од:hover, textarea:hover
граница: 1px твердых #233567;
}
Форма по умолчанию без CSS. Это выглядит как довольно скучная форма для меня!
Теперь, если мы добавили CSS, мы действительно можем улучшить общий вид формы. Эта форма является гораздо более захватывающим! Это дает более обновленный и современный вид с закругленными углами, нежной тени, и обивка, которая дает большее впечатление. Этот стиль формы подходит для многих веб-сайтов, но он определенно не подходит для каждого веб-сайта. Я надеюсь, вам понравится настроить эту форму на свой вкус.
CSS на форме делает большое влияние на ваш внешний вид в Интернете. Если вы заинтересованы в повышении вашей формы дальше, вы можете настроить с другими свойствами, которые вы найдете в учебниках здесь: фоновый цвет, градиент, обивка, или даже изображение, но я думаю, вы будете удовлетворены, просто добавив немного CSS в свой стиль.