Css3 ішіндегі әдемі іздеу формасы. Әдемі CSS3 іздеу пішінін жобалау

Мені сынға алды, олардың айтуынша, макет жаман, бірақ қазіргі заманғы HTML5 және CSS3 бар.

Әрине, мен түсінемін, соңғы стандарттар керемет және бәрі де. Бірақ, мен, әдетте, тапсырыс бойынша теруді жасаймын және көп жағдайда әртүрлі браузерлерде толық сәйкестендіру маңызды, бұл соңғы технологияларды пайдалануға мүмкіндік бермейді. Сондықтан мен ең алдымен кросс-браузер үйлесімділігіне назар аударамын және әдеттен тыс іздеу формасын «ескі әдіспен» жасадым.

Жалпы, осы пост арқылы мен жағдайды түзетемін (соңғы мақалаға көңілі толмағандар үшін =) және HTML5 және CSS3 технологияларын қолдана отырып, сол іздеу пішінінің макетінің нұсқасын ұсынамын.

Нәтижесінде не болатынын мысал келтіруге болады.

Бұл пішінді HTML5 және CSS3 көмегімен орналастырған кезде біз не жоғалтамыз

1. IE9 және одан төмен - әдепкі мәтінді көрмейді (толтырғыш төлсипаты).
2. IE8 және одан төмен - дөңгелек бұрыштар мен ішкі көлеңкелерді көрмейді.
3. IE7 - ол үшін басқа пішін енін көрсету керек, себебі ол box-sizing қасиетіне қолдау көрсетпейді.
4. IE6 - бірақ біз оны мүлдем ескермейміз =)

Басқа заманауи браузерлерде бәрі жақсы. Мен жоғарыда аталған кемшіліктер сыни емес деп есептеймін, сондықтан мен өз сайтым үшін соңғы технологияларды қолдану арқылы жасалған пішінді батыл қолданар едім.

Пішіннің HTML кодын іздеу

Бұл келесідей көрінеді:

Алдыңғы мақаладағы пішінмен салыстырғанда, HTML5 технологиясына сәйкес келесі өзгерістер енгізілді:

1. type="text" төлсипаты type="search" дегенмен ауыстырылды.
2. Кірістірілген сценарий толтырғышпен ауыстырылды="(!LANG:search" .!}

CSS коды

Міне, түсініктемелері бар барлық қажетті стильдер:

Іздеу ( /* дизайнға байланысты пішіннің қажетті енін орнатыңыз ** пішін қиындықсыз созылады */ ені: 35%; /* жіберу түймесі мүлдем орналасады, ** сондықтан бұл сипат қажет */позиция: салыстырмалы; ) .іздеу енгізу ( /* кірістердегі шекараларды өшіру */ шекара: жоқ; ) /* енгізу өрісіне арналған стильдер */ .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); /* дөңгелек бұрыштар */ жиек-радиусы: 20px;фон: #EEE;қаріп: 13px Tahoma, Arial, sans-serif;түсі: #555; конспект: жоқ; ) /* фокустағы енгізу өрісінің көрінісін өзгерту */ .search .input:focus ( box-shadow: кірістірілген 0 0 5px rgba(0,0,0,0,2), кірістірілген 0 1px 2px rgba(0,0, 0,0,4 ); фон: #E8E8E8; түсі: #333; ) /* жіберу түймешігін стильдеңіз */ .search .submit ( /* түймені пішіннің оң жақ шетінен абсолютті түрде орналастырыңыз */ позиция: абсолютті; жоғарғы: 0; оң жақта: 0; ені: 37 пиксель; /* түймені пішіннің толық биіктігіне дейін созыңыз */ биіктігі: 100%; курсор: көрсеткіш; фон: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAAABUg/gQtEXuPuIds/s13/go. png) 50% қайталанбайды; /* жіберу түймешігіне мөлдірлік қосу */ мөлдірлік: 0,5; ) /* іздеуде жіберу түймешігінің мөлдірлігін өзгерту */ .submit:hover ( мөлдірлік: 0,8; ) /* бұл сипат браузерлер ** Chrome және Safari кірістерді стильдей алуы үшін қажет */ кіріс ( -webkit-appearance: none; )

Ал IE үшін стильдер 9 нұсқасынан төмен:

/* 9-нұсқадан төмен IE үшін бөлек мәнерлер орнатыңыз */ *+html .search ( /* IE7 үшін басқа браузерлер үшін енін реттеңіз және оң жақ ** толтырғыш қосыңыз, осылайша жіберу түймесі орнына сай келеді */ ені: 28 %; толтыру : 0 52px 0 0; ) .search .input ( жиек: 1px біртұтас #DFDFDF; жиек-жоғарғы: 1px тұтас #B3B3B3; толтыру-жоғарғы: 7px; толтыру-төменгі: 8px; ) .search .input:focus ( жиек: 1px қатты #CFCFCF; жиектің жоғарғы жағы: 1px қатты #999; ) .search .submit (сүзгі: альфа(мөлдірлік=50); ) .search .submit:hover (сүзгі: альфа(мөлдірлік=80); )

P.S.Алдыңғы мақалаға пікірлері үшін сыншыларға рахмет! Сізге рахмет, менің басымда жаңа макет сәттері бар.

Сайтыңызда орынды үнемдейтін іздеу пішіндерінің екі нұсқасы. Басқан кезде пішін мәтін енгізу үшін кеңейеді. Тек пайдаланылады CSS3.

HTML

Қарапайым пішінмен html5тег:

css

Алдымен стильдерді қайта бастаймыз веб-кітіздеу жүйелеріне қосуға бейім браузерлер енгізутег жақтауы, жабу белгішесі. Сондықтан біз осы артық нәрсені алып тастаймыз:

Енгізу ( контур: жоқ; ) енгізу ( -webkit-көрініс: мәтін өрісі; -webkit-box-sizing: мазмұн-бокс; font-family: мұра; қаріп өлшемі: 100%; ) енгізу::-webkit-search-декорация , енгізу::-webkit-search-cancel-button (дисплей: жоқ; /* іздеу және бас тарту белгішесін алып тастаңыз */ )

Іздеу пішінін жасайық:

Біз барлық сипаттарға тоқталмаймыз, тек іздеу енгізуінің енінің алдымен мәні бар екенін ескеріңіз 55px, және дейін кеңейеді 130pxназар аудару сәтінде :фокус. Меншік өтуендегі бұл өзгерісті жандандыруға мүмкіндік береді. Жарқырау үшін қолданылады қораптың көлеңкесі:

Енгізу (фон: #ededed url(search-icon.png) қайталанбайтын 9px ортасы; жиек: тұтас 1px #ccc; толтыру: 9px 10px 9px 32px; ені: 55px; -webkit-border-radius: 10em; -moz- шекара радиусы: 10эм; шекара радиусы: 10ем; -webkit-өткізу: барлығы .5с; -moz-өткізу: барлығы .5с; өту: барлығы .5с; ) енгізу:фокус (ені: 130px; фон түсі: # fff; жиек түсі: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-көлеңке: 0 0 5px rgba(109,207,246,.5); қорап-көлеңке: 0 0 5px rgba(109,207,246,.5); )

AT демо 2 енгізуіздеу өрісі одан да ықшам - тек белгіше көрсетіледі. Оны басу енгізу өрісінің енін де өзгертеді.

#demo-b кірісі ( ені: 18 пиксель; толтыру-солға: 10 пиксель; түс: мөлдір; курсор: көрсеткіш; ) #demo-b кірісі: меңзерді апару (фон түсі: #fff; ) #demo-b кірісі: фокус ( ені : 130px; толтыру-сол жақ: 32px; түс: #000; фон түсі: #fff; курсор: авто; )

Ал мәтін мөлдір етіп жасалған:

#demo-b кірісі:-moz-толтырғыш ( түсі: мөлдір; ) #demo-b кірісі::-webkit-input-толтырғышы (түсі: мөлдір; )

Пішін барлық заманауи браузерлерде жұмыс істейді Chrome, Firefox, сафари, және IE8+.

Кез келген веб-сайттың ең көп қолданылатын элементтерінің бірі - іздеу формасы. Егер сіз өзіңіздің сайтыңыздың ыңғайлылығын жақсартқыңыз келсе және іздеген нәрсені табуды жеңілдеткіңіз келсе, іздеу пішінін әзірлеуге байыппен кірісуіңіз керек.

Сонымен, бүгін біз сізге CSS3 сипаттарын пайдаланып іздеу пішінін құрастыру туралы айтқымыз келеді.

Сіз бұрын CSS3 іздеу пішінін жобалау бойынша оқулықтарды тауып алған боларсыз, бірақ бүгін біз сізге сәл басқа нұсқаны ұсынғымыз келеді - box-shadow параметрі арқылы жүзеге асырылатын 3D эффектісі бар іздеу пішіні.

белгілеу

Төменде осы пішінді әзірлеу үшін пайдаланылған HTML кодын көре аласыз. Біздің толтырғышымыз HTML5 арқылы жасалғанын және біз барлық қажетті атрибуттарды пайдаланғанымызды ескеріңіз.

Бастапқыда біз HTML5-те енгізілген type="search" түрін қолданғымыз келді, бірақ кейін көптеген заманауи браузерлермен үйлеспейтіндіктен ойымызды өзгерттік. Енді бастапқы мәндерді қайта жазу үшін 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-шекаралық радиус: 10px;
-webkit-border-radius: 10px;
шекара радиусы: 10px
фон түсі: #f6f6f6;
background-image: -webkit-градиент(сызықтық, сол жақ жоғарғы, сол жақ төмен, бастап(#f6f6f6), дейін(#eae8e8));
background-image: -webkit-linear-gradient(жоғарғы, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(жоғарғы, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(жоғарғы, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(жоғарғы, #f6f6f6, #eae8e8);
background-image: сызықтық-градиент(жоғарғы, #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 кірістіру, 0 1px 0 #fff;
жәшік-көлеңке: 0 1px 1px #ddd кірістіру, 0 1px 0 #fff;
-moz-шектік-радиусы: 3px;
-webkit-border-радиусы: 3px;
шекара радиусы: 3px
}

Пішін ораушысы #іздеу:фокус (
контур: 0;
жиек түсі: #aaa;
-moz-box-shadow: 0 1px 1px #bbb кірістіру;
-webkit-box-shadow: 0 1px 1px #bbb кірістіру;
box-shadow: 0 1px 1px #bbb кірістіру;
}

Пішін ораушысы #іздеу::-webkit-input-placeholder (
түсі: №999;
шрифт салмағы: қалыпты
}

Пішін ораушысы #іздеу:-moz-толтырғыш (
түсі: №999;
шрифт салмағы: қалыпты
}

Пішін ораушысы #іздеу:-ms-input-placeholder (
түсі: №999;
шрифт салмағы: қалыпты
}

Пішін ораушысы #жіберу (
қалқымалы: оңға;
жиек: 1px қатты #00748f;
биіктігі: 42px;
ені: 100px
толтыру: 0;
курсор: көрсеткіш;
шрифт: қалың 15px Arial, Helvetica;
түсі: #fafafa;
мәтінді түрлендіру: бас әріп;
фон түсі: #0483a0;
background-image: -webkit-градиент (сызықтық, сол жақ жоғарғы, сол жақ төмен, бастап(#31b2c3), (#0483a0));
background-image: -webkit-linear-gradient(жоғарғы, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(жоғарғы, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(жоғарғы, #31b2c3, #0483a0);
background-image: -o-linear-gradient(жоғарғы, #31b2c3, #0483a0);
background-image: сызықтық-градиент(жоғарғы, #31b2c3, #0483a0);
-moz-шектік-радиусы: 3px;
-webkit-border-радиусы: 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;
}

Пішін ораушысы #жіберу: меңзерді апару,
.form-wrapper #жіберу:фокус (
фон түсі: #31b2c3;
background-image: -webkit-градиент(сызықтық, сол жақ жоғарғы, сол жақ төменгі, бастап(#0483a0), бастап(#31b2c3));
background-image: -webkit-linear-gradient(жоғарғы, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(жоғарғы, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(жоғарғы, #0483a0, #31b2c3);
background-image: -o-linear-gradient(жоғарғы, #0483a0, #31b2c3);
background-image: сызықтық-градиент(жоғарғы, #0483a0, #31b2c3);
}

Пішін ораушысы #жіберу:белсенді (
контур: 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) кірістіру;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) кірістіру;
}

Пішін ораушысы #жіберу::-moz-focus-inner (
шекара: 0;
}
Браузерді қолдау

Төменде іздеу пішінімізді көрсететін кейбір скриншоттарды көре аласыз. Егер бет шолғыштың ескі нұсқасында ашылса, ол да жақсы жұмыс істейтінін байқаған жөн. Сондай-ақ, бұл CSS3 іздеу пішіні пайдалануға толығымен дайын екенін қосқым келеді.

Қазіргі Chrome, Firefox, Safari, Opera, IE10 браузерлері:

Жақсы жаңалық, IE10 сонымен қатар HTML5 толтырғышын қолдайды.

IE ескі нұсқалары (6/7/8):

Қорытындысында

Егер сіз біздің алдыңғы мақалаларымызды оқыған болсаңыз, онда біз мұнда барлық браузерлер үшін жұмыс қосымшаларын (қайтару нұсқалары бар және онсыз) әзірлеп жатқанымызды білетін шығарсыз. Және бұл мысал да ерекшелік емес.

Іздеу блогын жасау үшін CSS3 пішінін пайдаланудан басқа, оны авторизация пішінін немесе жазылым пішінін жасауға оңай бейімдей аласыз.

Мақалада сайтты іздеу пішінінің орналасуының мүмкіндіктері сипатталған, семантикалық кодты белгілеудің мысалы, CSS3 дизайны, сонымен қатар соңында jQuery сиқырының біразы берілген.

• белгілеу

  HTML5 пайда болғанға дейін іздеу пішіні кәдімгі мәтіндік өріске айналдырылды, біздің өмірімізге белгілеу тілінің жаңа нұсқасы бірте-бірте келуімен ол үшін іздеу өрісінің ерекше түрі пайда болды. Сонымен, заманауи сайттың HTML-де біз келесідей нәрсені көруіміз мүмкін:

  FF, Opera, IE9 код нәтижесі:

  Вебкит қозғалтқышына негізделген браузерлерде (Chrome, Safari) сәл басқаша:

  Вебкиттегі іздеу өрісі

  Көріп отырғаныңыздай, өріске фокус қосылғанда бөлектеу қосылады, ал мәтінді енгізген кезде таза батырма пайда болады, оны басқан кезде өрістің мазмұны жойылады, бұл өздігінен ыңғайлы.

  CSS стилінсіз біздің іздеу пішініміз әзірге өте қарапайым болып көрінеді, осы мақалада біз келесідей нәрсені жасауға тырысамыз:

  
  Мысалға: іздеу пішінінің орналасуы

  Ескі браузерлерге қолдау көрсету жоспарланбаса, бос семантикалық емес элемент

  псевдоэлементпен ауыстырылуы мүмкін:befor .

  Іздеу формасын құрастыру ерекшеліктері

  Мен көптеген CSS3 қасиеттерін пайдалануды шешкендіктен, бұл ғажайыптар ескі Internet Explorer браузерлерінде жұмыс істемейді және кросс-браузер үйлесімділігіне қол жеткізу үшін балдақтарды қосу, суреттермен бірдеңе жасау және т.б.

  Ең алдымен, мен кейбір ерекшеліктерге назар аударғым келеді, атап айтқанда:

  • стильдеу webkit браузерлерінде
  • толтырғышты сәндеу

  Пішін мәнерлерін Chrome, Safari браузерлерінде іздеңіз

  .search сыныбы бар өріске стиль қосамыз:

  Іздеу (фон: #d8e6ef; жиек: 1px қатты #000; )

  Скриншот нәтижесі:

  FF, Opera, Chrome және Safari браузерлерінде іздеңіз

  Браузерлерде әдеттегідей таңқаларлық және шатасу бар, Chrome-да шекара қандай да бір түрде біртүрлі жұмыс істейді (шектер пайда болады, біз толтыруды орнатып жатқандай), Safari ережелерді мүлдем елемейді. Бірақ бұл жағдайда шешім бар, біз бұл ережені CSS кодына қосамыз:

  Іздеу ( -webkit-appearance: none; )

  Енді веб-киттерде бәрі жақсы, бірақ олар әдепкі фокустағы өрістерді бөлектеуде және анық түймеде әлі де ерекшеленеді. Бұл элементтер жиі ыңғайлы болса да, кейде дизайн идеясын бұзуы мүмкін және оларды өшіру керек. Артқы жарықтандыруды жою өте қарапайым:

  Іздеу:фокус ( контур: жоқ; /* фокусты бөлектеу жойылды */ -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-бас тарту түймесі (дисплей: жоқ; )

  Толтырғыш мәтінінің құрал кеңесін пішімдеу

  Өкінішке орай, мәтіндік нұсқаумен бәрі бір қарағанда көрінгеннен сәл күрделірек. Біріншіден, ол ескі браузерлерді айтпағанда, IE9 жүйесінде жұмыс істемейді, сондықтан JavaScript бастапқыда өрістегі кейбір мәтін қажет болатын маңызды жерлерде қолданылуы керек. Екіншіден, толтырғыш Firefox, Chrome, Safari браузерлерінде дизайнға жақсы сәйкес келмейді және Opera-ға мүлдем сәйкес келмейді:

  :-moz-толтырғыш (түс: #304e62; /* FF ішіндегі түс өзгертілді */ ) ::-webkit-input-placeholder (түс: #304e62; /* webkit түсін өзгертілді */ )

  Егер олар үтірмен бөлінген болса, бұл селекторлар жұмыс істемейтінін ескеріңіз, әрқайсысы жаңа жолдан басталуы керек.

  Мен қиындықтар туындауы мүмкін ерекше сәттерді қарастырдым, қалғаны азды-көпті тәжірибелі макет дизайнеріне қиындық тудырмауы керек.

  jQuery сценарийлері

  Соңында, пішінге бірнеше сценарийлерді қосамыз, атап айтқанда:

  • сұраудан бас тартайық және бос өрісті жіберген кезде қате туралы хабарды көрсетейік
  • өріске назар аударған кезде, төменгі жағында шағын құралдар кеңесін қосыңыз

  Мұның бәрін jQ күшімен жүзеге асыру өте оңай, мен түсініктемелері бар келесі кодты алдым:

  $(функция() ( /* пішінді жіберуді өңдеу */ $(".search-form").submit(function() ( var errVal = "бос сұрау"; /* Егер өріс бос болса немесе errVal мәні болса */ егер ( $(".search").val() == "" || $(".search").val() == errVal) ( /* өріске errVal мәнін қосыңыз, өң түсін өзгертіңіз және */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* қайтару жалған - пішін жіберілмеді */ false қайтарады; ); ) ); / * өріс фокусталғанда */ $(".search").focus(функция() ( /* өріс мәнін бос етіп орнатыңыз, өң түсін әдепкіге орнатыңыз */ $(осы).val(""). css((backgroundColor: "#d8e6ef")); /* құралдар кеңесін көрсету */ $(".notice").fadeIn(400); )); /* фокус жойылғанда */ $(".search"). blur(функция( ) ( /* құралдар кеңесін жою */ $(".notice").fadeOut(400); )); ));

  Әрине, сценарийдің жылдам жұмыс істеуі үшін скрипттегі сыныптарды идентификаторлармен ауыстырған дұрыс және құжатта бірдей класстары бар басқа элементтер пайда болса, олар сценарийді бұзбайды.

  Нәтижелер

  Осылайша, біз сайттың іздеу формасын әзірледік және бағдарламаладық, ол Firefox, Chrome, Opera, Safari және IE9+ соңғы нұсқаларында жұмыс істейді. Күшті тілекпен сіз кем дегенде IE6-дан бастап, азды-көпті кросс-шолғыш нұсқасын жасай аласыз.

  Тексерілді

  • Internet Explorer 9+
  • Опера
  • Firefox
  • Chrome
  • сафари

  Жобаға көмектесіңіз

Іздеу жолағы пайдаланушы интерфейсінің ең көп таралған элементтерінің бірі болуы мүмкін. Интерфейстің ыңғайлылығы деңгейінде жұмыс істегенде, стильді іздеу өрісін қосқыңыз келетіні жиі кездеседі. Бұл оқулықта біз псевдоэлементтер арқылы осындай танымал элементті жасаймыз.

HTML белгілеу

Мұндай өрісті дайындау үшін белгілеу минималды болады.

Бұл арнайы HTML5 толтырғышын және қажетті атрибуттарды пайдаланады:

• толтырғыш- бұл атрибут өріс енгізу фокусын алғанға дейін өрістегі мәтіннің шығысын орнатады, содан кейін мәтін жасырылады.
• қажет- бұл атрибут пішінді жібермес бұрын енгізу өрісінде ақпараттың болуының міндетті шартын белгілейді.

HTML5-те type атрибуты үшін де жаңа мағына бар: type="search" . Бірақ ол браузерлерде жақсы қолдау көрсетпейді, сондықтан біз оны әзірше пайдаланбаймыз.

img және input сияқты HTML элементтерінде мазмұн жоқ. Сондықтан, :befor сияқты псевдоэлемент түйме үшін ешқандай көрсеткілерді көрсетпейді.

Біздің жағдайда бұл мәселені шешу енгізу түрі = "жіберу" орнына type="submit" түймесін пайдалану болып табылады. Сондықтан пішінді ENTER пернесі арқылы сақтаймыз.

css

Төменде демонстрацияға қажетті стильдер берілген:

Мәтінді ораудан бас тарту

Cf:бұрын, .cf:after( мазмұн:""; дисплей:кесте; ) .cf:кейін( таза:боth; ) .cf( масштаб:1; )

Пішін элементтері

Түсінікті болу үшін шолғыш префикстері сабақ кодында көрсетілмеген. Толық кодты бастапқы мәтіннен көруге болады.

/* Пішін контейнерін сәндеу */ .form-wrapper ( ені: 450px; толтыру: 15px; жиегі: 150px авто 50px авто; фондық: #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 кірісі:фокус ( контур: 0; фондық: #fff; қорап-көлеңке: 0 0 2px rgba(0,0,0,.8) кірістіру; ) .form-wrapper кірісі::- webkit -input-placeholder (түсі: #999; шрифт-салмағы: қалыпты; шрифт-стиль: курсив; ) .form-wrapper input:-moz-placeholder (түсі: #999; шрифт-салмағы: қалыпты; шрифт-стиль: курсив ; ) .form-wrapper input:-ms-input-placeholder (түс: #999; шрифт-салмағы: қалыпты; шрифт-стиль: курсив; ) /* Пішінді жіберу түймесі */ .form-wrapper түймесі ( асып кету: көрінетін позициясы: салыстырмалы; қалқымалы: оңға; шекара: 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); ) .пішінді орауыш түймесі: меңзерді апару( фондық: #e54040; ) .пішінді орау түймесі:белсенді, .пішінді орау түймесі:фокус(фон: #c42f2f; контур: 0; ) .пішінді орау түймесі: алдында ( / * сол жақ көрсеткі */ мазмұн: ""; позиция: абсолютті; жиек ені: 8px 8px 8px 0; жиек стилі: тұтас қатты бірде-бір; жиек түсі: мөлдір #d83c3c мөлдір; жоғарғы: 12px; сол жақта: -6px; ) .form-wrapper түймесі: меңзерді жылжыту: бұрын( жиек-оң жақ-түс: #e54040; ) .form-орау түймесі:фокус:бұрын, .form-орау түймесі:белсенді:бұрын( жиек-оң жақ-түс: #c42f2f; ) .form-wrapper түймесі::-moz-focus-inner ( /* Mozilla Firefox-та түйменің жанындағы қосымша орынды алып тастаңыз */ жиегі: 0; толтыру: 0; )