Красива форма за търсене в css3. Проектиране на красив CSS3 формуляр за търсене
Бях критикуван, казват, че оформлението е гадно, но има модерни HTML5 и CSS3.
Разбира се, разбирам, най-новите стандарти са готини и всичко това. Но факт е, че по правило правя набор по поръчка и там в повечето случаи е важна пълната идентичност в различните браузъри, което не позволява използването на най-новите технологии. Затова се съсредоточавам предимно върху съвместимостта на различни браузъри и по навик съставих формата за търсене „по стария начин“.
Като цяло с тази публикация коригирам ситуацията (в името на онези, които бяха недоволни от последната статия =) и предлагам моята версия на оформлението на същата форма за търсене, но използвайки технологиите HTML5 и CSS3.
Възможен е пример какво се случва в резултат.
Какво губим, когато оформяме този формуляр с помощта на HTML5 и CSS3
- IE9 и по-стари - няма да виждат текста по подразбиране (атрибут placeholder).
- IE8 и по-долу - няма да вижда заоблени ъгли и вътрешни сенки.
- IE7 - трябва да посочите различна ширина на формата за него, т.к не поддържа свойството за оразмеряване на кутията.
- IE6 - но ние изобщо не го вземаме под внимание =)
В други съвременни браузъри всичко е наред. Смятам, че горните недостатъци не са критични, така че за моя сайт смело бих използвал форма, изложена с помощта на най-новите технологии.
HTML код на формата за търсене
Изглежда така:
В сравнение с формата от предишната статия са направени следните промени в съответствие с технологията HTML5:
- Атрибутът type="text" е заменен с type="search".
- Вграденият скрипт е заменен с placeholder="(!LANG:search" .!}
CSS код
Ето всички необходими стилове с коментари:
Търсене ( /* задайте необходимата ширина на формуляра в зависимост от дизайна ** формулярът се разтяга без проблеми */ ширина: 35%; /* бутонът за изпращане ще бъде позициониран абсолютно, ** така че това свойство е необходимо */ позиция: относително; ) .search input ( /* деактивиране на граници на входове */ border: none; ) /* стилове за полето за въвеждане */ .search .input ( /* разтягане на полето за въвеждане до пълната ширина на формуляра */ ширина : 100%; /* поради горната (8px) и долната (9px) подложка ** коригирайте височината на формуляра ** подложката отдясно (37px) повече от лявата, ** защото бутонът за изпращане ще бъде поставени там */ подложка: 8px 37px 9px 15px; /* за да направи ширината на полето за въвеждане (100%) включена вградена подложка */ -moz-box-sizing: border-box; box-sizing: border-box; / * добавяне на вградени сенки */ box-shadow: вмъкване 0 0 5px rgba(0,0 ,0,0.1), вмъкване 0 1px 2px rgba(0,0,0,0.3); /* кръгли ъгли */ border-radius: 20px; фон: #EEE; шрифт: 13px Tahoma, Arial, sans-serif; цвят: #555; контур: няма; ) /* промяна на външния вид на полето за въвеждане на фокус */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4 ); фон: #E8E8E8; цвят: #333; ) /* стилизирайте бутона за изпращане */ .search .submit ( /* позиционирайте бутона абсолютно от десния край на формуляра */ позиция: абсолютна; горе: 0; дясно: 0; ширина: 37px; /* разтегнете бутона до пълната височина на формуляра */ височина: 100%; курсор: показалец; фон: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% без повторение; /* добавяне на прозрачност към бутона за изпращане */ непрозрачност: 0,5; ) /* промяна на прозрачността на бутона за изпращане при задържане */ .search .submit:hover ( opacity: 0.8; ) /* това свойство е необходимо, за да могат браузърите ** Chrome и Safari да стилизират входове */ input ( -webkit-appearance: none; )
И стилове за IE под версия 9:
/* задайте отделни стилове за IE под версия 9 */ *+html .search ( /* за IE7 коригирайте ширината за други браузъри и добавете дясно ** подложка, така че бутонът за изпращане да пасне на мястото си */ ширина: 28 %; подложка : 0 52px 0 0; ) .search .input ( border: 1px solid #DFDFDF; border-top: 1px solid #B3B3B3; padding-top: 7px; padding-bottom: 8px; ) .search .input:focus ( border: 1px solid #CFCFCF; border-top: 1px solid #999; ) .search .submit (filter: alpha(opacity=50); ) .search .submit:hover (filter: alpha(opacity=80); )
P.S.Благодаря на критиците за коментарите по предишната статия! Благодарение на вас имам някои нови моменти на оформление в главата си.
Две опции за форми за търсене, които спестяват място на вашия сайт. При щракване формулярът се разширява за въвеждане на текст. Само използвани CSS3.
HTML
Проста форма с html5таг:
css
Първо, нека рестартираме стиловете за уебкитбраузъри, които са склонни да добавят към търсачките входрамка на етикет, икона за затваряне. Затова ще премахнем всичко това излишно:
Input ( outline: none; ) input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration , input::-webkit-search-cancel-button ( display: none; /* премахнете иконата за търсене и отмяна */ )
Нека създадем формуляр за търсене:
Няма да се спираме на всички свойства, просто имайте предвид, че ширината на входа за търсене първо има стойност 55 пиксела, и ще се разшири до 130 пикселав момента на фокусиране :фокус. Имот преходви позволява да анимирате тази промяна в ширината. Използва се за блясък кутия сянка:
Вход ( фон: #ededed url(search-icon.png) без повторение 9px център; рамка: плътен 1px #ccc; подложка: 9px 10px 9px 32px; ширина: 55px; -webkit-border-radius: 10em; -moz- border-radius: 10em; border-radius: 10em; -webkit-transition: всички .5s; -moz-transition: всички .5s; преход: всички .5s; ) input:focus ( width: 130px; background-color: # fff; цвят на границата: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); )
AT демо 2 входполето за търсене е още по-компактно - ще се показва само иконата. Щракването върху него също ще промени ширината на полето за въвеждане.
#demo-b input (ширина: 18px; padding-left: 10px; цвят: прозрачен; курсор: показалец;) #demo-b input:hover (background-color: #fff;) #demo-b input:focus ( width : 130px; padding-left: 32px; цвят: #000; цвят на фона: #fff; курсор: автоматично; )
И текстът става прозрачен:
#demo-b input:-moz-placeholder ( цвят: прозрачен; ) #demo-b input::-webkit-input-placeholder ( цвят: прозрачен; )
Формата работи във всички съвременни браузъри Chrome, Firefox, сафари, и IE8+.
Един от най-използваните елементи на всеки уебсайт е формата за търсене. Ако искате да подобрите използваемостта на вашия сайт и да го направите много по-лесно да намерите това, което търсите, тогава трябва да се заемете сериозно с проектирането на форма за търсене.
И така, днес искаме да ви разкажем за проектирането на формуляр за търсене с помощта на CSS3 свойства.
Вероятно вече сте намирали уроци за проектиране на CSS3 формуляр за търсене в миналото, но днес искаме да ви предложим малко по-различна опция - формуляр за търсене с 3D ефект, реализиран с помощта на параметъра box-shadow.
маркиране
По-долу можете да видите HTML кода, използван за разработване на този формуляр. Моля, обърнете внимание, че нашият пълнител е разработен с помощта на HTML5 и сме използвали всички необходими атрибути.
Първоначално искахме да използваме type="search", въведен в HTML5, но след това променихме решението си поради несъвместимост с много съвременни браузъри. Сега трябва да добавим няколко допълнителни реда CSS код, за да презапишем оригиналните стойности.
CSS код
Нека да разгледаме минималните стилове, използвани за създаване на красив CSS3 формуляр за търсене:
Обвивка на формуляр (
ширина: 450px
подложка: 8px
поле: 100px автоматично;
преливане: скрито;
ширина на границата: 1px;
стил на границата: плътен
цвят на границата: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
кутия-сянка: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
радиус на границата: 10px
цвят на фона: #f6f6f6;
фоново изображение: -webkit-градиент (линеен, ляво горе, ляво долу, от (#f6f6f6), до (#eae8e8));
фоново изображение: -webkit-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: -moz-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: -ms-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: -o-линеен градиент (отгоре, #f6f6f6, #eae8e8);
фоново изображение: линеен градиент (отгоре, #f6f6f6, #eae8e8);
}
Форма-обвивка #търсене(
ширина: 330px
височина: 20px;
подложка: 10px 5px;
поплавък: наляво;
шрифт: получер 16px "lucida sans", "trebuchet MS", "Tahoma";
рамка: 1px плътен #ccc;
-moz-box-shadow: 0 1px 1px #ddd вмъкване, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
кутия-сянка: 0 1px 1px #ddd вмъкване, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
радиус на границата: 3px
}
Form-wrapper #search:focus (
контур: 0;
цвят на границата: #aaa;
-moz-box-shadow: 0 1px 1px #bbb вмъкване;
-webkit-box-shadow: 0 1px 1px #bbb вмъкване;
кутия-сянка: 0 1px 1px #bbb вмъкване;
}
Form-wrapper #search::-webkit-input-placeholder (
цвят: #999;
тегло на шрифта: нормално
}
Form-wrapper #search:-moz-placeholder (
цвят: #999;
тегло на шрифта: нормално
}
Form-wrapper #search:-ms-input-placeholder (
цвят: #999;
тегло на шрифта: нормално
}
Обвивка на формуляр #изпращане (
float:right;
рамка: 1px плътен #00748f;
височина: 42px;
ширина: 100px
подплата: 0;
курсор: показалец;
шрифт: удебелен 15px Arial, Helvetica;
цвят: #fafafa;
преобразуване на текст: главни букви;
цвят на фона: #0483a0;
фоново изображение: -webkit-градиент (линеен, ляво горе, ляво долу, от (#31b2c3), до (#0483a0));
фоново изображение: -webkit-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: -moz-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: -ms-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: -o-линеен градиент (отгоре, #31b2c3, #0483a0);
фоново изображение: линеен градиент (отгоре, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
радиус на границата: 3px
текстова сянка: 0 1px 0 rgba(0, 0,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) вмъкване, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) вмъкване, 0 1px 0 #fff;
кутия-сянка: 0 1px 0 rgba(255, 255, 255, 0.3) вмъкване, 0 1px 0 #fff;
}
Обвивка на формуляр #submit:hover,
.form-wrapper #submit:focus (
цвят на фона: #31b2c3;
фоново изображение: -webkit-градиент (линеен, ляво горе, ляво долу, от (#0483a0), до (#31b2c3));
фоново изображение: -webkit-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: -moz-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: -ms-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: -o-линеен градиент (отгоре, #0483a0, #31b2c3);
фоново изображение: линеен градиент (отгоре, #0483a0, #31b2c3);
}
Form-wrapper #submit:active (
контур: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) вмъкване;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) вмъкване;
кутия-сянка: 0 1px 4px rgba(0, 0, 0, 0.5) вмъкване;
}
Form-wrapper #submit::-moz-focus-inner (
граница: 0;
}
Поддръжка на браузър
По-долу можете да видите някои екранни снимки, показващи нашата форма за търсене. Трябва да забележите, че работи добре и ако страницата е отворена в по-стара версия на браузъра. Бих искал също да добавя, че тази CSS3 форма за търсене е напълно готова за използване.
Съвременни браузъри Chrome, Firefox, Safari, Opera, IE10:
Моля, обърнете внимание, че в момента Opera поддържа атрибута placeholder в HTML5, но не може да бъде стилизиран.
Добрата новина е, че IE10 поддържа и HTML5 filler.
Наследени версии на IE (6/7/8):
*
В заключение
Ако сте чели предишните ни статии, вероятно знаете, че тук разработваме работещи приложения (със и без версии за връщане назад) за всички браузъри. И този пример не прави изключение.
В допълнение към използването на CSS3 формуляр за създаване на блок за търсене, можете лесно да го адаптирате, за да създадете формуляр за оторизация или формуляр за абонамент.
Статията описва характеристиките на оформлението на формуляра за търсене в сайта, предоставя пример за маркиране на семантичен код, CSS3 дизайн, плюс малко jQuery магия в края.
-
маркиране
Преди появата на HTML5 формулярът за търсене беше превърнат в обикновено текстово поле, с постепенното навлизане на нова версия на езика за маркиране в живота ни, за него се появи специален тип поле за търсене. Така че в HTML на модерен сайт може да видим нещо подобно:
Резултат от кода в FF, Opera, IE9:
И малко по-различно в браузъри, базирани на двигателя на webkit (Chrome, Safari):
Полето за търсене в webkitКакто можете да видите, когато се добави фокус към полето, се добавя подчертаване, а при въвеждане на текст се появява бутон за изчистване, когато щракнете върху него, съдържанието на полето се изтрива, което е доста удобно само по себе си.
Без CSS стил, нашата форма за търсене изглежда доста проста досега, в тази статия ще се опитаме да направим нещо подобно:
например: оформление на формата за търсене
Освен ако не е планирана поддръжка за по-стари браузъри, празен несемантичен елемент
може да бъде заменен с псевдо-елемент:before.Характеристики на дизайна на формата за търсене
Тъй като реших да използвам много свойства на CSS3, тези чудеса няма да работят в старите браузъри на Internet Explorer и за да постигнете съвместимост между браузъри, трябва да свържете патерици, да направите нещо със снимки и т.н.
Преди всичко бих искал да обърна внимание на някои характеристики, а именно:
- стилизация в уебкит браузъри
- стил на заместител
Стилове на формуляри за търсене в браузърите Chrome, Safari
Нека добавим малко стил към полето с класа .search:
Търсене ( фон: #d8e6ef; рамка: 1px плътен #000; )
Резултат от екранна снимка:
Търсете в браузърите FF, Opera, Chrome и SafariКакто обикновено в браузърите, има залитане и объркване, в Chrome рамката работи някак си странно (появяват се полета, сякаш задаваме padding), Safari напълно игнорира правилата. Но има решение в тази ситуация, добавяме това правило към CSS кода:
Търсене ( -webkit-appearance: няма; )
Сега всичко е наред в webkits, но те все още се различават в маркирането на полета при фокус по подразбиране и бутон за изчистване. Тези елементи, макар и често удобни, понякога могат да развалят идеята за дизайн и трябва да бъдат деактивирани. Премахването на подсветката е много просто:
Search:focus ( контур: няма; /* премахнато осветяване на фокуса */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow: inset 0 0 2px #000; box-shadow: inset 0 0 2px #000; /* добавена вътрешна сянка като алтернатива за всички браузъри */ )
Остава да се отървете от бутона за изчистване. Всъщност може лесно да се стилизира чрез замяна на обикновен кръст с някакъв фон, позициониране и т.н., но в моя пример няма да е необходимо:
/* правило само за елемент с търсене в клас */ .search::-webkit-search-cancel-button ( дисплей: няма; /* премахнат бутон за изчистване */ ) /* или всички полета с търсене на тип в документа */ вход: :-webkit-search-cancel-button ( дисплей: няма; )
Подсказка за форматиране на текстовия заместител
За съжаление, с текстов намек, всичко е малко по-сложно, отколкото изглежда на пръв поглед. Първо, не работи в IE9, да не говорим за по-старите браузъри, така че JavaScript трябва да се използва на критични места, където първоначално се изисква някакъв текст в полето. Второ, контейнерът не се поддава добре на дизайн в браузърите Firefox, Chrome, Safari и изобщо не се поддава на Opera:
:-moz-placeholder ( цвят: #304e62; /* променен цвят в FF */ ) ::-webkit-input-placeholder ( цвят: #304e62; /* променен цвят в webkit */ )
Моля, обърнете внимание, че тези селектори няма да работят, ако са изброени разделени със запетаи, всеки трябва да започва на нов ред.
Обмислих специални моменти, в които могат да възникнат трудности, останалите не трябва да създават проблеми за повече или по-малко опитен дизайнер на оформление.
jQuery скриптове
И накрая, нека добавим някои скриптове към нашата форма, а именно:
- нека анулираме заявката и показваме съобщение за грешка при изпращане на празно поле
- когато фокусирате върху полето, добавете малка подсказка в долната част
Много е лесно да внедря всичко това със силата на jQ, получих следния код с коментари:
$(function() ( /* обработка на подаването на формуляр */ $(".search-form").submit(function() ( var errVal = "празна заявка"; /* Ако полето е празно или съдържа errVal стойност */ ако ( $(".search").val() == "" || $(".search").val() == errVal) ( /* добавя стойност errVal към полето, променя цвета на фона и */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - формулярът не е изпратен */ return false; ); ) ); / * когато полето е фокусирано */ $(".search").focus(function() ( /* задаване на празна стойност на полето, задаване на цвета на фона по подразбиране */ $(this).val(""). css((backgroundColor : "#d8e6ef")); /* показва подсказка */ $(".notice").fadeIn(400); )); /* когато фокусът е премахнат */ $(".search"). blur(function( ) ( /* премахване на подсказка */ $(".notice").fadeOut(400); )); ));
Разбира се, най-добре е да замените класовете в скрипта с идентификатори за по-бърза работа на скрипта и ако в документа се появят други елементи със същите класове, те няма да нарушат скрипта.
Резултати
По този начин проектирахме и програмирахме формата за търсене на сайта, тя работи в най-новите версии на Firefox, Chrome, Opera, Safari и IE9+. При силно желание можете да направите повече или по-малко кросбраузърна версия, като започнете поне с IE6.
Проверено
- Internet Explorer 9+
- Опера
- Firefox
- Chrome
- сафари
Помогнете на проекта
Полето за търсене вероятно е един от най-често срещаните елементи на потребителския интерфейс. Когато работите върху нивото на използваемост на интерфейса, много често искате да добавите стилно поле за търсене. В този урок ще създадем такъв популярен елемент, използвайки псевдоелементи.
HTML маркиране
За да подготвите такова поле, маркирането ще бъде минимално.
Това използва специален HTML5 контейнер и задължителни атрибути:
- контейнер- този атрибут задава извеждането на текст в полето, преди полето да получи входен фокус, след което текстът е скрит.
- изисква се- този атрибут задава задължително условие за наличие на информация в полето за въвеждане преди подаване на формуляра.
HTML5 също има ново значение за атрибута type: type="search" . Но не се поддържа добре в браузърите, така че засега няма да го използваме.
HTML елементи като img и input нямат съдържание. Следователно псевдоелемент като :before няма да покаже никакви стрелки за бутона.
Решението на този проблем в нашия случай е да се използва бутон type="submit" вместо input type="submit". Така че запазваме формата с помощта на клавиша ENTER.
css
Ето стиловете, необходими за нашата демонстрация:
Отмяна на обвиването на текст
Cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )
Елементи на формата
Префиксите на браузъра не са показани в кода на урока за по-голяма яснота. Можете да видите пълния код в изходния текст.
/* Оформяне на контейнера на формуляр */ .form-wrapper (ширина: 450px; подложка: 15px; поле: 150px автоматично 50px автоматично; фон: #444; фон: rgba(0,0,0,.2); border-radius : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); ) /* Оформете полето за въвеждане на текст */ .form-wrapper input ( ширина: 330px; височина: 20px; подложка: 10px 5px; float: ляво; шрифт: удебелен 15px "lucida sans", "trebuchet MS", "Tahoma"; граница: 0; фон: #eee; border-radius: 3px 0 0 3px; ) .form-wrapper input:focus ( контур: 0; фон: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper input::- webkit -input-placeholder (цвят: #999; font-weight: нормален; font-style: italic; ) .form-wrapper input:-moz-placeholder (цвят: #999; font-weight: нормален; font-style: italic ; ) .form-wrapper input:-ms-input-placeholder ( цвят: #999; font-weight: normal; font-style: italic; ) /* Бутон за подаване на формуляр */ .form-wrapper бутон ( препълване: видимо позиция: относителна; float:right; граница: 0; подплата: 0; курсор: показалец; височина: 40px; ширина: 110px шрифт: удебелен 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; цвят: #fff; преобразуване на текст: главни букви; фон: #d83c3c; радиус на границата: 0 3px 3px 0; текстова сянка: 0 -1px 0 rgba(0, 0,0, .3); ) .form-wrapper бутон: hover( фон: #e54040; ) .form-wrapper бутон: активен, .form-wrapper бутон: фокус ( фон: #c42f2f; контур: 0; ) .form-wrapper бутон: преди ( / * стрелка наляво */ съдържание: ""; позиция: абсолютна; ширина на границата: 8px 8px 8px 0; стил на границата: плътна плътна плътна няма; цвят на границата: прозрачен #d83c3c прозрачен; отгоре: 12px; отляво: -6px; ) .form-wrapper button:hover:before( border-right-color: #e54040; ) .form-wrapper button:focus:before, .form-wrapper button:active:before( border-right-color: #c42f2f; ) .form-wrapper button::-moz-focus-inner ( /* Премахнете допълнителното пространство до бутона в Mozilla Firefox */ border: 0; padding: 0; )
