Прекрасна форма за пребарување во css3. Дизајнирање на прекрасен формулар за пребарување CSS3
Ме критикуваа, велат, изгледот е смрден, но има модерни HTML5 и CSS3.
Се разбира, разбирам, најновите стандарди се кул и сето тоа. Но, факт е дека јас, по правило, правам наборување по нарачка, и таму, во повеќето случаи, важен е целосниот идентитет во различни прелистувачи, што не дозволува користење на најновите технологии. Затоа, јас се фокусирам првенствено на компатибилноста со вкрстени прелистувачи и, по навика, го составив формуларот за пребарување „на стар начин“.
Во принцип, со овој пост ја корегирам ситуацијата (за доброто на оние кои беа незадоволни од последната статија =) и ја нудам мојата верзија на изгледот на истиот формулар за пребарување, но користејќи HTML5 и CSS3 технологии.
Можен е пример за тоа што се случува како резултат.
Што губиме кога ја поставуваме оваа форма користејќи HTML5 и CSS3
- IE9 и подолу - нема да го види стандардниот текст (атрибут на место за место).
- IE8 и подолу - нема да гледа заоблени агли и внатрешни сенки.
- IE7 - треба да наведете различна ширина на формата за него, бидејќи не го поддржува својството за големина на кутијата.
- IE6 - но ние воопшто не го земаме предвид =)
Во другите модерни прелистувачи, сè е во ред. Верувам дека горенаведените недостатоци не се критични, така што за мојата страница смело би користел формулар поставен со користење на најновите технологии.
HTML код на формуларот за пребарување
Изгледа вака:
Во споредба со формата од претходната статија, направени се следните промени во согласност со технологијата HTML5:
- Атрибутот type="text" е заменет со type="пребарување" .
- Вградената скрипта е заменета со placeholder="(!LANG:пребарување" .!}
CSS код
Еве ги сите потребни стилови со коментари:
Пребарување ( /* поставете ја потребната ширина на формуларот во зависност од дизајнот ** формуларот се протега без проблеми */ ширина: 35%; /* копчето за поднесување ќе биде позиционирано апсолутно, ** затоа е потребно ова својство */ позиција: релативно; ) .влез за пребарување ( /* оневозможи граници на влезовите */ граница: нема; ) /* стилови за полето за внесување */ .пребарување .влез ( /* истегнете го полето за внес до целата ширина на формата */ ширина : 100%; /* поради горната (8px) и долната (9px) поставата ** приспособете ја висината на формата ** полнењето надесно (37px) повеќе од левото, ** бидејќи копчето за поднесување ќе биде поставено таму */ пополнување: 8 px 37 px 9 px 15 px; /* за да се направи ширината на полето за внесување (100%) вклучено внатрешно полнење */ -moz-box-sizing: border-box; box-sizing: border-box; / * додадете вградени сенки */ кутија-сенка: вметнување 0 0 5px rgba(0,0 ,0,0.1), внесено 0 1px 2px rgba(0,0,0,0,3); /* тркалезни агли */ радиус на граница: 20 px; позадина: #EEE; фонт: 13px Tahoma, Arial, sans-serif; боја: #555; преглед: нема; ) /* сменете го изгледот на полето за внесување во фокусот */ .пребарување .влез:фокус ( кутија-сенка: вметнување 0 0 5px rgba(0,0,0,0.2), внесување 0 1px 2px rgba(0,0, 0,0,4); позадина: #E8E8E8; боја: #333; ) /* стилизирај го копчето за поднесување */ .пребарување .поднеси ( /* поставете го копчето апсолутно од десниот раб на формата */ позиција: апсолутно; врвот: 0; десно: 0; ширина: 37 px; /* истегнете го копчето до целосна висина на формата */ висина: 100%; курсор: покажувач; позадина: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% без повторување; /* додадете транспарентност на копчето за поднесување */ непроѕирност: 0,5; ) /* променете ја транспарентноста на копчето за поднесување .повторување на лебди */ .submit:hover ( непроѕирност: 0,8; ) /* ова својство е потребно за прелистувачите ** Chrome и Safari да можат да стилизираат влезови */ влез ( -webkit-appearance: none; )
И стилови за IE под верзијата 9:
/* поставете посебни стилови за IE под верзијата 9 */ *+html .search ( /* за IE7 приспособете ја ширината за другите прелистувачи и додајте право ** полнење за да се вклопи копчето за поднесување */ ширина: 28 %; полнење : 0 52 px 0 0; ) .пребарување .влез ( граница: 1px солидна #DFDFDF; граница-горна страна: 1px солидна #B3B3B3; padding-top: 7px; padding-долу: 8px; ) .пребарување .влез:фокус (работа: 1px солидна #CFCFCF; граница-горе: 1px солидна #999; ) .пребарување .поднеси (филтер: алфа(непроѕирност=50); .пребарување .поднеси:подвиже (филтер: алфа(непроѕирност=80); )
П.С.Благодарност до критичарите за коментарите на претходната статија! Благодарение на вас, имам неколку нови моменти за распоред во мојата глава.
Две опции за формулари за пребарување кои заштедуваат простор на вашата страница. Кога ќе кликнете, формата се проширува за внесување текст. Само користени CSS3.
HTML
Едноставна форма со html5ознака:
css
Прво, да ги рестартираме стиловите за веб-комплетпрелистувачи кои имаат тенденција да додаваат во пребарувачите внесувањерамка за ознаки, икона за затворање. Затоа, ќе го отстраниме сето ова излишно:
Внесување ( преглед: нема; ) внесување ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration , внесување::-webkit-search-cancel-button (приказ: нема; /* отстранете ја иконата за пребарување и откажување */ )
Ајде да создадеме формулар за пребарување:
Ние нема да се задржиме на сите својства, само забележете дека ширината на влезот за пребарување прво има вредност 55 пиксели, и ќе се прошири на 130 пикселиво моментот на фокусирање : фокус. Имотот транзицијави овозможува да ја анимирате оваа промена во ширината. Се користи за сјај сенка на кутијата:
Внесување ( позадина: #ededed url(search-icon.png) без повторување 9 px центар; граница: солидна 1px #cccc; полнење: 9px 10px 9px 32px; ширина: 55px; -webkit-border-radius: 10em; -moz- граница-радиус: 10em; граница-радиус: 10em; -веб-кит-транзиција: сите .5s; -moz-транзиција: сите .5s; транзиција: сите .5s; ) влез: фокус ( ширина: 130 px; боја на позадина: # fff; граница-боја: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); кутија-сенка: 0 0 5 px rgba (109,207,246,.5); )
AT демо 2 внесувањеполето за пребарување е уште покомпактно - ќе се прикаже само иконата. Со кликнување на него ќе се промени и ширината на полето за внесување.
#demo-b влез ( ширина: 18 px; пополнување-лево: 10 px; боја: транспарентен; курсор: покажувач; ) #demo-b влез: лебди (боја на позадина: #fff; ) #demo-b влез: фокус ( ширина : 130 px; пополнување-лево: 32 px; боја: #000; боја на позадина: #fff; курсор: автоматски; )
И текстот е проѕирен:
#demo-b влез:-moz-holder (боја: транспарентна; ) #demo-b влез::-webkit-input-placeholder (боја: транспарентна; )
Формата работи во сите модерни прелистувачи Хром, Firefox, сафари, и IE8+.
Еден од најкористените елементи на која било веб-страница е формуларот за пребарување. Ако сакате да ја подобрите употребливоста на вашиот сајт и да го олесните наоѓањето на она што го барате, тогаш треба сериозно да се занимавате со дизајнирање формулар за пребарување.
Значи, денес сакаме да ви кажеме за дизајнирање формулар за пребарување користејќи својства на CSS3.
Веројатно веќе сте нашле упатства за дизајнирање формулар за пребарување CSS3 во минатото, но денес сакаме да ви понудиме малку поинаква опција - формулар за пребарување со 3D ефект имплементиран со помош на параметарот box-shadow.
означување
Подолу можете да го видите HTML-кодот што се користи за развивање на оваа форма. Ве молиме имајте предвид дека нашиот пополнувач е развиен со користење на HTML5 и ги користевме сите потребни атрибути.
Отпрвин сакавме да го користиме типот = "пребарување" воведен во HTML5, но потоа се предомисливме поради некомпатибилност со многу современи прелистувачи. Сега треба да додадеме неколку дополнителни линии CSS код за да ги презапишеме оригиналните вредности.
CSS код
Ајде да ги погледнеме минималните стилови што се користат за создавање убава форма за пребарување CSS3:
обвивка за форма (
ширина: 450 пиксели
полнење: 8 px
маржа: 100 px автоматско;
претекување: скриено;
граница-ширина: 1px;
граничен стил: цврст
граница-боја: #дедеде #бабаба #ааа #бабаба;
-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-граница-радиус: 10px;
-webkit-border-radius: 10px;
граница-радиус: 10px
позадина-боја: #f6f6f6;
позадина-слика: -веб-комплет-градиент (линеарен, лево горе, лево долу, од(#f6f6f6), до (#eae8e8));
позадина-слика: -веб-кит-линеарен-градиент(горе, #f6f6f6, #eae8e8);
позадина-слика: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
позадина-слика: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
позадина-слика: -o-линеарен-градиент(горе, #f6f6f6, #eae8e8);
позадина-слика: линеарен-градиент(горе, #f6f6f6, #eae8e8);
}
Обвивка за формулари #пребарување(
ширина: 330 пиксели
висина: 20 px;
полнење: 10px 5px;
плови: лево;
фонт: задебелен 16px "lucida sans", "trebuchet MS", "Tahoma";
граница: 1px солидна #cccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 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-граница-радиус: 3px;
-webkit-border-radius: 3px;
граница-радиус: 3px
}
Обвивка на формулари #search:focus (
преглед: 0;
граница-боја: #ааа;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
кутија-сенка: 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:десно;
граница: 1px солидна #00748f;
висина: 42 px;
ширина: 100 пиксели
баласт: 0;
курсорот: покажувач;
фонт: задебелен 15px Arial, Helvetica;
боја: #фафафа;
текст-трансформација: големи букви;
боја на позадина: #0483a0;
позадина-слика: -веб-комплет-градиент (линеарен, лево горе, лево долно, од(#31b2c3), до (#0483a0));
позадина-слика: -веб-кит-линеарен-градиент(горе, #31b2c3, #0483a0);
позадина-слика: -moz-linear-gradient(top, #31b2c3, #0483a0);
позадина-слика: -ms-linear-gradient(top, #31b2c3, #0483a0);
позадина-слика: -o-линеарен-градиент(горе, #31b2c3, #0483a0);
позадина-слика: линеарен градиент (горе, #31b2c3, #0483a0);
-moz-граница-радиус: 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) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
кутија-сенка: 0 1px 0 rgba(255, 255, 255, 0.3) вметната, 0 1px 0 #fff;
}
Обвивка за формулари #submit:hover,
.form-wrapper #submit:focus (
позадина-боја: #31b2c3;
позадина-слика: -веб-комплет-градиент (линеарен, лево горе, лево долу, од(#0483a0), до (#31b2c3));
позадина-слика: -веб-кит-линеарен-градиент(горе, #0483a0, #31b2c3);
позадина-слика: -moz-linear-gradient(top, #0483a0, #31b2c3);
позадина-слика: -ms-linear-gradient(top, #0483a0, #31b2c3);
позадина-слика: -o-линеарен-градиент(горе, #0483a0, #31b2c3);
позадина-слика: линеарен градиент (горе, #0483a0, #31b2c3);
}
Обвивка на формулари #submit:active (
преглед: 0;
-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;
кутија-сенка: 0 1px 4px rgba(0, 0, 0, 0,5) вметнување;
}
Форма-обвивка #поднеси::-moz-focus-inner (
граница: 0;
}
Поддршка на прелистувачот
Подолу можете да видите некои слики од екранот што ја прикажуваат нашата форма за пребарување. Треба да забележите дека исто така работи добро ако страницата е отворена во постара верзија на прелистувачот. Исто така, би сакал да додадам дека овој формулар за пребарување CSS3 е целосно подготвен за употреба.
Современи прелистувачи Chrome, Firefox, Safari, Opera, IE10:
Ве молиме имајте предвид дека Opera моментално го поддржува атрибутот на место во HTML5, но тој не може да се стилизира.
Добрата вест е дека IE10 исто така поддржува HTML5 полнење.
Наследни верзии на IE (6/7/8):
*
Во заклучок
Ако сте ги прочитале нашите претходни написи, тогаш веројатно знаете дека овде развиваме работни апликации (со и без верзии на враќање) за сите прелистувачи. И овој пример не е исклучок.
Покрај користењето на формуларот CSS3 за создавање блок за пребарување, можете лесно да го прилагодите за да креирате формулар за авторизација или формулар за претплата.
Написот ги опишува карактеристиките на распоредот на формуларот за пребарување на страницата, дава пример за обележување на семантички код, дизајн на CSS3, плус малку jQuery магија на крајот.
-
означување
Пред појавата на HTML5, формуларот за пребарување беше направен во редовно поле за текст, со постепено пристигнување на нова верзија на јазикот за означување во нашите животи, се појави посебен вид поле за пребарување за него. Значи, во HTML на модерна страница, може да видиме нешто како ова:
Резултат на кодот во FF, Opera, IE9:
И малку поинаку во прелистувачите базирани на моторот на веб-кит (Chrome, Safari):
Поле за пребарување во веб-китотКако што можете да видите, кога се додава фокус на полето, се додава означување, а при внесување на текст се појавува копче за бришење, кога ќе кликнете на него, содржината на полето се брише, што само по себе е прилично погодно.
Без CSS стил, нашата форма за пребарување изгледа прилично едноставна досега, во оваа статија ќе се обидеме да направиме нешто вака:
на пример: распоред на формулари за пребарување
Освен ако не се планира поддршка за постари прелистувачи, празен не-семантички елемент
може да се замени со псевдоелемент:пред .Карактеристики на дизајнот на формуларот за пребарување
Бидејќи решив да користам многу својства на CSS3, овие чуда нема да работат во старите прелистувачи на Internet Explorer, а за да постигнете компатибилност со вкрстени прелистувачи, треба да поврзете патерици, да направите нешто со слики итн.
Пред сè, би сакал да привлечам внимание на некои карактеристики, имено:
- стилизација во прелистувачите на веб-кит
- стајлинг на место
Пребарувајте стилови на формулари во прелистувачите Chrome, Safari
Ајде да додадеме стил во полето со класата .search:
Пребарување (заднина: #d8e6ef; граница: солидна 1px #000; )
Резултат од екранот:
Пребарувајте во прелистувачите FF, Opera, Chrome и SafariКако и обично во прелистувачите, има запрепастување и конфузија, во Chrome границата некако чудно функционира (се појавуваат маргини, како да поставуваме padding), Safari целосно ги игнорира правилата. Но, постои решение во оваа ситуација, го додаваме ова правило во кодот CSS:
Пребарување ( -webkit-appearance: нема;)
Сега сè е во ред во веб-китовите, но тие сепак се разликуваат во истакнувањето на полињата на стандардниот фокус и копче за бришење. Овие елементи, иако често се погодни, понекогаш може да ја расипат идејата за дизајн и треба да се оневозможат. Отстранувањето на позадинското осветлување е многу едноставно:
Пребарување:фокус ( преглед: нема; /* отстрането нагласување на фокусот */ -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-пребарување-откажи-копче (приказ: нема; )
Форматирање на советот за текстуална алатка за место
За жал, со навестување текст, сè е малку покомплицирано отколку што изгледа на прв поглед. Прво, не работи во IE9, а да не зборуваме за постарите прелистувачи, така што JavaScript треба да се користи на критични места каде што првично е потребен текст во полето. Второ, местенката не се позајмува добро за дизајнирање во прелистувачите Firefox, Chrome, Safari и воопшто не се позајмува на Opera:
:-moz-placeholder (боја: #304e62; /* ја смени бојата во FF */ ) ::-webkit-input-placeholder (боја: #304e62; /* ја смени бојата во веб-китот */ )
Имајте предвид дека овие избирачи нема да работат ако се наведени одделени со запирки, секој мора да започне на нова линија.
Размислував за посебни моменти во кои може да се појават тешкотии, а остатокот не треба да предизвикува проблеми за повеќе или помалку искусен дизајнер на распоред.
jQuery скрипти
Конечно, да додадеме неколку скрипти во нашата форма, имено:
- ајде да го откажеме барањето и да прикажеме порака за грешка при испраќање празно поле
- кога се фокусирате на теренот, додајте мал совет за алатка на дното
Многу е лесно да се имплементира сето ова со моќта на jQ, го добив следниот код со коментари:
$(function() ( /* се справува со поднесување формулар */ $(".search-form").submit(function() ( var errVal = "празна барање"; /* Ако полето е празно или содржи вредност errVal */ ако ( $(".пребарување").val() == "" || $(".пребарување").val() == errVal) ( /* додадете errVal вредност во полето, сменете ја бојата на позадината и */ $( " .пребарување").val(errVal).css((Боја на позадина: "rgba(0,0,0,.1)")); /* врати неточно - формуларот не е поднесен */ врати неточно; ); ) ) / * кога полето е фокусирано */ $(".пребарување").focus(function() ( /* поставете ја вредноста на полето на празно, поставете ја бојата на заднината на стандардно */ $(this).val(""). css((backgroundColor : "#d8e6ef")); /* прикажи совет за алатка */ $(".notice").fadeIn(400); )); /* кога фокусот е отстранет */ $(".пребарување"). blur(function( ) ( /* remove tooltip */ $(".notice").fadeOut(400); )); ));
Се разбира, најдобро е класите во скриптата да се заменат со идентификатори за побрзо функционирање на скриптата, а доколку во документот се појават други елементи со исти класи, тие нема да ја скршат скриптата.
Резултати
Така, го дизајниравме и програмиравме формуларот за пребарување на страницата, работи во најновите верзии на Firefox, Chrome, Opera, Safari и IE9+. Со силна желба, можете да направите повеќе или помалку верзија со вкрстен прелистувач, почнувајќи барем со IE6.
Проверено
- Internet Explorer 9+
- Опера
- Firefox
- Хром
- сафари
Помогнете му на проектот
Полето за пребарување е веројатно еден од најчестите елементи на корисничкиот интерфејс. Кога работите на ниво на употребливост на интерфејсот, многу е вообичаено да сакате да додадете стилско поле за пребарување. Во ова упатство, ќе создадеме толку популарен елемент користејќи псевдоелементи.
HTML обележување
За да се подготви такво поле, обележувањето ќе биде минимално.
Ова го користи специјалното место за HTML5 и потребните атрибути:
- местенка- овој атрибут го поставува излезот на текстот во полето пред полето да добие влезен фокус, а потоа текстот се крие.
- потребно- овој атрибут поставува задолжителен услов за присуство на информации во полето за внесување пред да се поднесе формуларот.
HTML5 исто така има ново значење за атрибутот тип: type="search" . Но, не е добро поддржан во прелистувачите, така што засега нема да го користиме.
HTML елементите како img и влез немаат содржина. Затоа, псевдоелемент како :before нема да прикаже никакви стрелки за копчето.
Решението за овој проблем во нашиот случај е да се користи копчето type="submit" наместо внесување type="submit". Така, ја задржуваме формата користејќи го копчето ENTER.
css
Еве ги стиловите потребни за нашето демо:
Откажете го завиткувањето на текстот
Cf:before, .cf:after( содржина:""; приказ:табела; ) .cf:after(clear:both;) .cf(зум:1; )
Формирани елементи
Префиксите на прелистувачот не се прикажани во кодот на лекцијата за подобра јасност. Целосниот код можете да го видите во изворниот текст.
/* Стајлирање на контејнерот со формулари */ .form-wrapper ( ширина: 450 px; пополнување: 15 px; маргина: 150 px автоматски 50 px автоматски; позадина: #444; позадина: rgba(0,0,0,.2); раб-радиус : 10 px; кутија-сенка: 0 1px 1px rgba(0,0,0,.4) вметната, 0 1px 0 rgba(255,255,255,.2); ) /* Стилизирајте го полето за внесување текст */ .внесување обвивка на форма ( ширина: 330 px; висина: 20 px; полнење: 10 px 5 px; пловечки: лево; фонт: задебелен 15 px „lucida sans“, „trebuchet MS“, „Tahoma“; граница: 0; позадина: #eee; радиус на граница: 3 px 0 0 3px; ) .влез за обвивка: фокус ( преглед: 0; заднина: #fff; кутија-сенка: 0 0 2px rgba(0,0,0,.8) вметната; ) .влез за обвивка::- webkit -input-placeholder ( боја: #999; тежина на фонт: нормална; стил на фонт: курзив; ) .внес на обвивка:-moz-место (боја: #999; тежина на фонт: нормална; стил на фонт: курзив ; ) .влез за обвивка:-ms-влез-местодржач (боја: #999; тежина на фонтот: нормална; стил на фонт: курзив; ) /* Копче за поднесување формулари */ копче за обвивка форма */ копче за обвивка на форма ( прелевање: видливо позиција: релативна; float:десно; граница: 0; баласт: 0; курсорот: покажувач; висина: 40 px; ширина: 110 пиксели фонт: задебелен 15px/40px „lucida sans“, „trebuchet MS“, „Tahoma“; боја: #fff; текст-трансформација: големи букви; позадина: #d83c3c; граница-радиус: 0 3px 3px 0; текст-сенка: 0 -1px 0 rgba(0, 0,0, .3); ) .копче за обвивка на форма: лебди (заднина: #e54040; ) .копче за обвивка на форма: активно, копче за обвивка на форма: фокус (заднина: #c42f2f; преглед: 0; ) .копче за обвивка: пред ( / * лева стрелка */ содржина: ""; позиција: апсолутна; ширина на граница: 8 px 8 px 8 px 0; рабови во стил: солидна цврста нема; боја-работа: транспарентна #d83c3c транспарентна; горе: 12 px; лево: -6 px; ) .копче за обвивка за форма: лебди: пред (работа-десно-боја: #e54040; ) .копче за обвивка на форма:фокус:пред, копче за обвивка за форма:активно:пред (боја-десно-рабница: #c42f2f; ) Копче .form-wrapper::-moz-focus-inner ( /* Отстранете го дополнителниот простор до копчето во Mozilla Firefox */ граница: 0; пополнување: 0; )
