Գեղեցիկ որոնման ձև css3-ում: Գեղեցիկ CSS3 որոնման ձևի ձևավորում

Ինձ քննադատում էին, ասում են՝ դասավորությունը ծծումբ է, բայց կան ժամանակակից HTML5 ու CSS3։

Իհարկե, հասկանում եմ, նորագույն ստանդարտները թույն են և այդ ամենը։ Բայց փաստն այն է, որ ես, որպես կանոն, շարադրում եմ ըստ պատվերի, և այնտեղ, շատ դեպքերում, կարևոր է ամբողջական ինքնությունը տարբեր բրաուզերներում, ինչը թույլ չի տալիս օգտագործել նորագույն տեխնոլոգիաներ։ Հետևաբար, ես հիմնականում կենտրոնանում եմ բրաուզերների համատեղելիության վրա և, սովորությունից ելնելով, կազմել եմ որոնման ձևը «հին ձևով»:

Ընդհանրապես այս գրառմամբ ես շտկում եմ իրավիճակը (հանուն վերջին հոդվածից դժգոհողների =) և առաջարկում եմ նույն որոնման ձևի դասավորության իմ տարբերակը, բայց օգտագործելով HTML5 և CSS3 տեխնոլոգիաները։

Հնարավոր է օրինակ, թե ինչ է տեղի ունենում արդյունքում։

Ի՞նչ ենք մենք կորցնում HTML5-ի և CSS3-ի միջոցով այս ձևը դնելիս

1. IE9 և ստորև - չի տեսնի լռելյայն տեքստը (տեղապահ հատկանիշ):
2. IE8 և ստորև - չի տեսնի կլորացված անկյունները և ներքին ստվերները:
3. IE7 - դրա համար պետք է նշեք այլ ձևի լայնություն, քանի որ այն չի ապահովում տուփի չափման հատկությունը:
4. IE6 - բայց մենք դա ընդհանրապես հաշվի չենք առնում =)

Այլ ժամանակակից բրաուզերներում ամեն ինչ կարգին է: Կարծում եմ, որ վերը նշված թերությունները կարևոր չեն, ուստի իմ կայքի համար ես համարձակորեն կօգտագործեի նորագույն տեխնոլոգիաների օգտագործմամբ շարադրված ձևը:

Որոնման ձևի HTML կոդը

Այն կարծես այսպիսին է.

Համեմատած նախորդ հոդվածի ձևի հետ՝ HTML5 տեխնոլոգիայի համաձայն կատարվել են հետևյալ փոփոխությունները.

1. Type="text" հատկանիշը փոխարինվել է type="որոնում"-ով:
2. Ներդիր սկրիպտը փոխարինվել է placeholder="(!LANG:search" .!}

CSS կոդը

Ահա բոլոր անհրաժեշտ ոճերը՝ մեկնաբանություններով.

Որոնում ( /* սահմանեք ձևի պահանջվող լայնությունը՝ կախված դիզայնից ** ձևը ձգվում է առանց խնդիրների */ լայնությունը՝ 35%, /* ուղարկել կոճակը բացարձակապես կտեղադրվի, ** այնպես որ այս հատկությունը անհրաժեշտ է */ դիրքը. հարաբերական; ) .որոնել մուտքագրում ( /* անջատել սահմանները մուտքերի վրա */ եզրագիծը՝ ոչ մեկը; ) /* մուտքագրման դաշտի ոճերը */ .search .input ( /* մուտքագրման դաշտը ձգել մինչև ձևի ամբողջ լայնությունը */ լայնությունը 100%; /* վերևի (8px) և ներքևի (9px) լիցքավորման շնորհիվ ** ձևի բարձրությունը կարգավորեք ** աջ կողմում լիցքավորումը (37px) ավելի շատ, քան ձախը, ** քանի որ ուղարկել կոճակը կլինի տեղադրված է այնտեղ */ լիցք՝ 8px 37px 9px 15px; /* մուտքագրման դաշտի լայնությունը (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); /* կլոր անկյուններ */ սահմանային շառավիղ: 20px; ֆոն՝ #EEE; տառատեսակ՝ 13px Tahoma, Arial, sans-serif; գույնը՝ #555; ուրվագիծը՝ ոչ մի; ) /* փոխել մուտքագրման դաշտի տեսքը ֆոկուսի վրա */ .որոնել .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; ) /* ոճավորել ուղարկել կոճակը */ .որոնել .ներկայացնել ( /* տեղադրել կոճակը բացարձակապես ձևի աջ եզրից */ դիրքը՝ բացարձակ; վերև. 0; աջ՝ 0; լայնություն՝ 37 պիքսել; /* ձգել կոճակը մինչև ձևի ամբողջ բարձրությունը */ բարձրությունը՝ 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 .որոնում ( /* IE7-ի համար կարգավորեք լայնությունը այլ բրաուզերների համար և ավելացրեք աջ ** լցոն, որպեսզի ուղարկել կոճակը տեղավորվի տեղում */ լայնությունը՝ 28 %; լիցք 0 52px 0 0; ) .search .input ( եզրագիծ՝ 1px կոշտ #DFDFDF; եզրագիծ՝ 1px ամուր #B3B3B3; padding-top՝ 7px; padding-bottom՝ 8px; ) .search .input:focus ( եզրագիծ: 1px պինդ #CFCFCF; եզրագծի վերևում՝ 1px ամուր #999; ) .search .submit (ֆիլտր՝ ալֆա(անթափանցիկություն=50);

P.S.Շնորհակալություն քննադատներին նախորդ հոդվածի մեկնաբանությունների համար: Քո շնորհիվ գլխումս նոր դասավորության պահեր կան:

Երկու տարբերակ որոնման ձևերի համար, որոնք տարածք են խնայում ձեր կայքում: Երբ սեղմում եք, ձևը ընդլայնվում է տեքստի մուտքագրման համար: Միայն օգտագործված CSS3.

HTML

Պարզ ձևի հետ html5պիտակ:

css

Նախ, եկեք վերագործարկենք ոճերը վեբ հավաքածուբրաուզերներ, որոնք հակված են ավելացնել որոնման համակարգերին մուտքագրումպիտակի շրջանակ, փակել պատկերակը: Հետևաբար, մենք կհեռացնենք այս ամենը ավելորդ.

Մուտք (ուրվագծում՝ ոչ մեկը; ) մուտքագրում ( -webkit-appearance՝ textfield; -webkit-box-sizing: content-box; տառատեսակ-ընտանիք՝ ժառանգել; տառաչափ՝ 100%; ) մուտքագրում::-webkit-search-decoration , մուտքագրում::-webkit-search-cancel-button (ցուցադրում՝ ոչ մեկը; /* հեռացնել որոնումը և չեղարկել պատկերակը */)

Եկեք ստեղծենք որոնման ձև.

Մենք չենք անդրադառնա բոլոր հատկությունների վրա, պարզապես նշեք, որ որոնման մուտքի լայնությունը նախ արժեք ունի 55px, և կընդլայնվի մինչև 130pxկենտրոնացման պահին :կենտրոնացում. Սեփականություն անցումթույլ է տալիս աշխուժացնել լայնության այս փոփոխությունը: Օգտագործվում է փայլի համար տուփի ստվեր:

Մուտք (ֆոն՝ #ededed url(search-icon.png) առանց կրկնության 9px կենտրոն; եզրագիծ՝ ամուր 1px #cccc; լիցք՝ 9px 10px 9px 32px; լայնությունը՝ 55px; -webkit-border-radius՝ 10em; -moz- եզրագծի շառավիղ՝ 10մ; եզրագծի շառավիղ՝ 10մ; -վեբկիտ-անցում. բոլորը .5 վրկ; -moz-անցումը՝ բոլոր .5 վրկ; անցումը՝ բոլորը .5 վրկ; ) մուտքագրում:կենտրոնացում (լայնությունը՝ 130px; ֆոնի գույնը՝ # 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 մուտքագրում (լայնությունը՝ 18px; լիցք՝ ձախ՝ 10px; գույնը՝ թափանցիկ, կուրսորը՝ ցուցիչ; ) #demo-b մուտքագրում:սավառնում (ֆոնի գույնը՝ #fff; ) #demo-b մուտքագրում:focus ( լայնությունը 130px; լիցք-ձախ՝ 32px; գույն՝ #000; ֆոնի գույն՝ #fff; կուրսորը՝ ավտոմատ; )

Իսկ տեքստը թափանցիկ է.

#demo-b մուտքագրում:-moz-placeholder (գույնը՝ թափանցիկ; ) #demo-b մուտքագրում::-webkit-input-placeholder (գույնը՝ թափանցիկ; )

Ձևն աշխատում է բոլոր ժամանակակից բրաուզերներում Chrome, Firefox, սաֆարի, և IE8+.

Ցանկացած կայքի ամենաշատ օգտագործվող տարրերից մեկը որոնման ձևն է: Եթե ​​ցանկանում եք բարելավել ձեր կայքի հարմարավետությունը և շատ ավելի հեշտ դարձնել այն, ինչ փնտրում եք, ապա դուք պետք է լրջորեն զբաղվեք որոնման ձևի նախագծմամբ:

Այսպիսով, այսօր մենք ուզում ենք ձեզ պատմել CSS3 հատկությունների օգտագործմամբ որոնման ձևի նախագծման մասին:

Հավանաբար, նախկինում արդեն գտել եք CSS3 որոնման ձևի նախագծման ձեռնարկներ, բայց այսօր մենք ուզում ենք ձեզ մի փոքր այլ տարբերակ առաջարկել՝ 3D էֆեկտով որոնման ձև, որն իրականացվում է box-shadow պարամետրի միջոցով:

նշում

Ստորև կարող եք տեսնել HTML կոդը, որն օգտագործվում է այս ձևը մշակելու համար: Խնդրում ենք նկատի ունենալ, որ մեր լցոնիչը մշակվել է HTML5-ի միջոցով, և մենք օգտագործել ենք բոլոր անհրաժեշտ ատրիբուտները:

Սկզբում մենք ցանկանում էինք օգտագործել HTML5-ում ներդրված «որոնում» տիպը, բայց հետո փոխեցինք մեր միտքը՝ շատ ժամանակակից բրաուզերների հետ անհամատեղելիության պատճառով: Այժմ մենք պետք է ավելացնենք մի քանի լրացուցիչ տող CSS կոդը՝ սկզբնական արժեքները վերագրելու համար:

Եկեք նայենք այն նվազագույն ոճերին, որոնք օգտագործվում են գեղեցիկ CSS3 որոնման ձև ստեղծելու համար.

Ձևաթուղթ (
լայնությունը՝ 450px
լիցք՝ 8px
լուսանցք՝ 100px ավտոմատ;
վարարում: թաքնված;
եզրագծի լայնությունը՝ 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-border-radius՝ 10px;
-webkit-border-radius՝ 10px;
սահման-շառավիղ՝ 10px
ֆոնի գույնը՝ #f6f6f6;
ֆոնային պատկեր.
ֆոնային պատկեր. -webkit-linear-gradient (վերև, #f6f6f6, #eae8e8);
ֆոնային պատկեր. -moz-linear-gradient (վերև, #f6f6f6, #eae8e8);
ֆոնային պատկեր. -ms-linear-gradient (վերև, #f6f6f6, #eae8e8);
ֆոնային պատկեր. -o-linear-gradient (վերև, #f6f6f6, #eae8e8);
ֆոն-պատկեր՝ գծային-գրադիենտ (վերև, #f6f6f6, #eae8e8);
}

Ձևաթուղթ #որոնում(
լայնությունը՝ 330px
բարձրությունը՝ 20px;
լիցք՝ 10px 5px;
բոց: ձախ;
տառատեսակը՝ թավ 16px «lucida sans», «trebuchet MS», «Tahoma»;
եզրագիծ՝ 1px կոշտ #ccc;
-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-border-radius՝ 3px;
-webkit-border-radius՝ 3px;
սահման-շառավիղ՝ 3px
}

Form-wrapper #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;
բարձրությունը՝ 42px;
լայնությունը՝ 100px
լիցք: 0;
կուրսորը `ցուցիչ;
տառատեսակը՝ թավ 15px Arial, Helvetica;
գույնը՝ #fafafa;
տեքստ-տրանսֆորմ՝ մեծատառ;
ֆոնի գույնը՝ #0483a0;
ֆոնային պատկեր.
ֆոնային պատկեր. -webkit-linear-gradient (վերև, #31b2c3, #0483a0);
ֆոնային պատկեր. -moz-linear-gradient (վերև, #31b2c3, #0483a0);
ֆոնային պատկեր. -ms-linear-gradient (վերև, #31b2c3, #0483a0);
ֆոնային պատկեր. -o-linear-gradient (վերև, #31b2c3, #0483a0);
ֆոն-պատկեր՝ գծային-գրադիենտ (վերև, #31b2c3, #0483a0);
-moz-border-radius՝ 3px;
-webkit-border-radius՝ 3px;
սահման-շառավիղ՝ 3px
text-shadow՝ 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;
ֆոնային պատկեր.
ֆոնային պատկեր. -webkit-linear-gradient (վերև, #0483a0, #31b2c3);
ֆոնային պատկեր. -moz-linear-gradient (վերև, #0483a0, #31b2c3);
ֆոնային պատկեր. -ms-linear-gradient (վերև, #0483a0, #31b2c3);
ֆոնային պատկեր. -o-linear-gradient (վերև, #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:

Լավ նորությունն այն է, որ IE10-ն աջակցում է նաև HTML5 լցոնիչին:

IE-ի ժառանգական տարբերակները (6/7/8):

Եզրափակելով

Եթե ​​կարդացել եք մեր նախորդ հոդվածները, ապա հավանաբար գիտեք, որ այստեղ մենք մշակում ենք աշխատանքային հավելվածներ (վերադարձի տարբերակներով և առանց դրանց) բոլոր բրաուզերների համար։ Եվ այս օրինակը բացառություն չէ։

Ի հավելումն որոնման բլոկ ստեղծելու համար CSS3 ձևի օգտագործմանը, դուք հեշտությամբ կարող եք այն հարմարեցնել թույլտվության ձև կամ բաժանորդագրության ձև ստեղծելու համար:

Հոդվածում նկարագրվում են կայքի որոնման ձևի դասավորության առանձնահատկությունները, տրամադրվում է իմաստային կոդի նշագրման օրինակ, CSS3 ձևավորում և վերջում մի փոքր jQuery մոգություն:

• նշում

  Մինչ HTML5-ի հայտնվելը, որոնման ձևը վերածվել էր սովորական տեքստային դաշտի, երբ նշագծման լեզվի նոր տարբերակի աստիճանաբար մուտք գործեց մեր կյանք, դրա համար հայտնվեց հատուկ տիպի որոնման դաշտ: Այսպիսով, ժամանակակից կայքի HTML-ում մենք կարող ենք տեսնել այսպիսի բան.

  Կոդի արդյունքը FF, Opera, IE9:

  Եվ մի փոքր այլ կերպ բրաուզերներում, որոնք հիմնված են webkit շարժիչի վրա (Chrome, Safari).

  Որոնման տուփ վեբկետում

  Ինչպես տեսնում եք, երբ ֆոկուսը ավելացվում է դաշտին, ավելացվում է շեշտադրում, իսկ տեքստ մուտքագրելիս հայտնվում է հստակ կոճակ, որի վրա սեղմելիս դաշտի պարունակությունը ջնջվում է, ինչն ինքնին բավականին հարմար է։

  Առանց CSS ոճավորման, մեր որոնման ձևն առայժմ բավականին պարզ է թվում, այս հոդվածում մենք կփորձենք նման բան անել.

  
  օրինակ: որոնման ձևի դասավորություն

  Եթե ​​չի նախատեսվում աջակցություն ավելի հին բրաուզերների համար, դատարկ ոչ իմաստային տարր

  կարելի է փոխարինել կեղծ տարրով՝ նախքան ։

  Որոնման ձևի ձևավորման առանձնահատկությունները

  Քանի որ ես որոշեցի օգտագործել CSS3-ի շատ հատկություններ, այս հրաշքները չեն աշխատի հին Internet Explorer բրաուզերներում, և բրաուզերների հետ համատեղելիության հասնելու համար պետք է միացնել հենակները, ինչ-որ բան անել նկարներով և այլն:

  Նախ, ես կցանկանայի ուշադրություն հրավիրել որոշ առանձնահատկությունների վրա, մասնավորապես.

  • ոճավորում webkit բրաուզերներում
  • տեղապահի ոճավորում

  Որոնեք ձևերի ոճերը Chrome, Safari բրաուզերներում

  Եկեք մի քանի ոճ ավելացնենք դաշտում .search դասի հետ:

  Որոնում (ֆոն՝ #d8e6ef; եզրագիծ՝ 1px կոշտ #000; )

  Սքրինշոթի արդյունքը՝

  Որոնեք FF, Opera, Chrome և Safari բրաուզերներում

  Ինչպես սովորաբար բրաուզերներում, կա ցնցող և շփոթություն, Chrome-ում եզրագիծը ինչ-որ կերպ տարօրինակ է աշխատում (լուսանցքները հայտնվում են, կարծես մենք դնում ենք padding), Safari-ն ամբողջովին անտեսում է կանոնները: Բայց այս իրավիճակում լուծում կա, մենք ավելացնում ենք այս կանոնը CSS կոդի մեջ.

  Որոնում ( -webkit-appearance: none; )

  Այժմ վեբ հավաքածուներում ամեն ինչ կարգին է, բայց դրանք դեռևս տարբերվում են լռելյայն ֆոկուսի վրա դաշտերը ընդգծելով և հստակ կոճակով: Այս տարրերը, թեև հաճախ հարմար են, երբեմն կարող են փչացնել դիզայնի գաղափարը և պետք է անջատվեն: Հետևի լույսը հեռացնելը շատ պարզ է.

  Որոնում: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() ( /* handle form submission */ $(".search-form").submit(function() ( var errVal = "դատարկ հարցում"; /* Եթե դաշտը դատարկ է կամ պարունակում է errVal արժեք */ եթե ( $(".որոնում").val() == "" || $(".որոնում").val() == errVal) ( /* ավելացնել errVal արժեքը դաշտում, փոխել ֆոնի գույնը և */ $( " .որոնում").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* return false - ձևը ներկայացված չէ */ return false; );) );/ * երբ դաշտը կենտրոնացված է */ $(".որոնում").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
  • Chrome
  • սաֆարի

  Օգնեք նախագծին

Որոնման տուփը, հավանաբար, օգտագործողի միջերեսի ամենատարածված տարրերից մեկն է: Ինտերֆեյսի օգտագործելիության մակարդակի վրա աշխատելիս շատ տարածված է նորաձև որոնման դաշտ ավելացնելու ցանկությունը: Այս ձեռնարկում մենք կստեղծենք նման հայտնի տարր՝ օգտագործելով կեղծ տարրեր:

HTML նշում

Նման դաշտ պատրաստելու համար նշագրումը նվազագույն կլինի:

Սա օգտագործում է հատուկ HTML5 տեղապահը և պահանջվող ատրիբուտները.

• տեղապահ- այս հատկանիշը սահմանում է տեքստի ելքը դաշտում, նախքան դաշտը մուտքային ֆոկուս ստանալը, այնուհետև տեքստը թաքցվում է:
• պահանջվում է- այս հատկանիշը նախքան ձևը ներկայացնելը պարտադիր պայման է դնում մուտքագրման դաշտում տեղեկատվության առկայության համար:

HTML5-ը նաև նոր նշանակություն ունի տեսակի հատկանիշի համար՝ type="search" : Բայց այն լավ չի աջակցվում բրաուզերներում, ուստի մենք առայժմ չենք օգտագործի այն:

HTML տարրերը, ինչպիսիք են img-ը և input-ը, բովանդակություն չունեն: Հետևաբար, :before-ի նման կեղծ տարրը կոճակի համար որևէ սլաք չի ցուցադրի:

Մեր դեպքում այս խնդրի լուծումը մուտքագրման տիպի ==ներկայացնել» կոճակի տիպի «ներկայացնել» օգտագործելն է: Այսպիսով, մենք պահում ենք ձևը, օգտագործելով ENTER ստեղնը:

css

Ստորև ներկայացված են մեր ցուցադրության համար պահանջվող ոճերը.

Չեղարկել տեքստի փաթեթավորումը

Cf:before, .cf:after( բովանդակություն:""; ցուցադրում:աղյուսակ; ) .cf:after( clear:both;) .cf(zoom:1;)

Ձևի տարրեր

Բրաուզերի նախածանցները դասի կոդում ցուցադրված չեն ավելի լավ պարզության համար: Ամբողջական կոդը կարող եք տեսնել սկզբնաղբյուր տեքստում:

/* Ձևաթղթի կոնտեյների ձևավորում */ .form-wrapper ( լայնությունը՝ 450px; լիցք՝ 15px; լուսանցք՝ 150px auto 50px auto; ֆոն՝ #444; ֆոն՝ rgba(0,0,0,.2); եզրագծի շառավիղ 10px; box-shadow՝ 0 1px 1px rgba(0,0,0,.4) ներդիր, 0 1px 0 rgba(255,255,255,.2); ) /* Ոճավորեք տեքստի մուտքագրման տուփը */ .form-wrapper մուտքագրում ( լայնությունը՝ 330px; բարձրությունը՝ 20px; լիցք՝ 10px 5px; լողացող՝ ձախ; տառատեսակ՝ թավ 15px "lucida sans", "trebuchet MS", "Tahoma"; եզրագիծ՝ 0; ֆոն՝ #eee; եզրագծի շառավիղ՝ 3px 0 0 3px; ) .form-wrapper մուտքագրում:focus ( ուրվագիծ՝ 0; ֆոն՝ #fff; box-shadow՝ 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper մուտքագրում::- webkit -input-placeholder (գույնը՝ #999; տառատեսակի քաշը՝ նորմալ; տառատեսակի ոճը՝ շեղ; ) շեղ ;) .form-wrapper մուտքագրում:-ms-input-placeholder (գույնը՝ #999; տառատեսակի քաշը՝ նորմալ; տառատեսակի ոճը՝ շեղ; պաշտոնը` հարաբերական; float:աջ; եզրագիծը `0; լիցք: 0; կուրսորը `ցուցիչ; բարձրությունը՝ 40px; լայնությունը՝ 110px տառատեսակը՝ թավ 15px/40px «lucida sans», «trebuchet MS», «Tahoma»; գույնը՝ #fff; տեքստ-տրանսֆորմ՝ մեծատառ; ֆոն՝ #d83c3c; սահման-շառավիղ՝ 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0,0, .3); ) .form-wrapper կոճակ:հովեր(ֆոն՝ #e54040; ) .form-wrapper կոճակ:ակտիվ, .form-wrapper կոճակ:focus(ֆոն՝ #c42f2f; ուրվագիծ՝ 0;) .form-wrapper կոճակ:նախքան ( / * ձախ սլաք */ բովանդակությունը՝ ""; դիրքը՝ բացարձակ; եզրագծի լայնությունը՝ 8px 8px 8px 0; եզրագծի ոճը՝ պինդ պինդ պինդ ոչ մեկը; եզրագծի գույնը՝ թափանցիկ #d83c3c թափանցիկ; վերևում՝ 12px; ձախը՝ -6px; ) .form-wrapper կոճակ:sover:fore( border-right-color: #e54040; ) .form-wrapper button:focus:fore, .form-wrapper button:active:fore( border-right-color: #c42f2f; ) .form-wrapper կոճակ::-moz-focus-inner ( /* Հեռացրեք կոճակի կողքին գտնվող լրացուցիչ տարածքը Mozilla Firefox-ում */ եզրագիծը՝ 0; padding՝ 0; )