Në përpjekje për të reduktuar formën dhe për të reduktuar zhurmën vizuale, etiketojnë projektuesit
Keq
Mirë
Stilimi: ndryshoni ngjyrën e mbajtësit të vendndodhjes CSS
Ndrysho stilin e fushës së hyrjes me mbajtësin e vendndodhjes CSS
Keq
efekti mbajtës i vendit për
Atributi mbajtës i vendndodhjes funksionon vetëm për Dhe
Një metodë e lashtë memorie që ndryshon vlerën e JavaScript
Atributi mbajtës i vendndodhjes përdoret për të thirrur në veprim brenda elementeve të hyrjes boshe dhe zonës së tekstit. Në këtë artikull, ne do të shikojmë mundësitë e stilimit të vendmbajtësit të një teksti, si dhe disa truke që do ta bëjnë atë më të përshtatshëm dhe funksional.
Pra, le të fillojmë me një shembull për ata që nuk e dinë se çfarë është një vendmbajtes.
html
Stili i mbajtësit të vendit mund të ndryshohet duke përdorur grupin e mëposhtëm të rregullave css:
css
::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (ngjyra:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (ngjyra:#c0392b;) Duket e frikshme, apo jo? Fakti është se kjo ende nuk është në standarde. Secili shfletues ka implementuar mbështetjen për stilimin e mbajtësve të vendeve në mënyrën e vet.
Në IE dhe firefox më të vjetër (para-18) mbajtësi i vendndodhjes konsiderohet një pseudo-klasë, ndërsa në firefox më të ri, webkit dhe blink është një pseudo-element.
Le të shohim se çfarë ndodhi:
Duhet të them që jo të gjitha vetitë e mundshme css janë të mbështetura. Shumica e shfletuesve modernë ju lejojnë të ndryshoni:
- font (dhe vetitë e ngjashme)
- sfond (dhe vetitë e lidhura)
- ngjyrë
- ndarja e fjalëve
- ndarja e shkronjave
- tekst-dekorim
- vertikal-drejtuar
- tekst-transformim
- vija e gjatesise
- dhëmbëzimi i tekstit
- tejmbushje teksti
- errësirë
Po sikur mbajtësi i vendit të mos përshtatet?
Ndonjëherë fushat e futjes së tekstit zvogëlohen në gjerësi për shkak të veçorive të paraqitjes, veçanërisht në pajisjet celulare. Në këtë rast, teksti i gjatë i mbajtësit të vendit do të pritet në mënyrë të shëmtuar. Për ta parandaluar këtë, mund të përdorni tekst-overflow: elipsis . Kjo sintaksë do të funksionojë në të gjithë shfletuesit e rinj.
css
input (tekst-mbushje:ellipsis;) hyrje::-moz-mbajtësi i vendit (tekst-mbushje:ellipsis;) hyrje:-moz-mbajtësi i vendit (tekst-mbirje:ellipsis;) futje:-ms-input-mbrojtës i vendit (tekst-mbimbytje :elipsis;) Si të fshehni mbajtësin e vendit në fokus?
Fshehja e një mbajtëse vendi ndodh në mënyra të ndryshme.
- në disa shfletues kur fokusohet me hyrje
- në shfletues të tjerë nëse është futur të paktën një karakter
Më pëlqen më shumë opsioni i parë. Për të vendosur këtë sjellje në të gjithë shfletuesit që mbështesin mbajtësin e vendndodhjes, ne përcaktojmë rregullat e mëposhtme css:
css
:focus::-webkit-input-placeholder (ngjyra: transparente) :fokus::-moz-placeholder (ngjyra: transparent) :focus:-moz-placeholder (ngjyra: transparent) :fokus:-ms-input-placeholder ( ngjyra: transparente) Duke e fshehur bukur mbajtësin e vendit
Ju gjithashtu mund të shtoni një tranzicion për të shfaqur dhe fshehur mbajtësin e vendeve:
css
/* zbeh opacitetin e mbajtësit të vendndodhjes në fokus */ .input1::-webkit-input-placeholder (opacity: 1; tranzicioni: opacity 0.3s lehtësi;) .input1::-moz-placeholder (opacity: 1; tranzicioni: opacity 0.3s lehtësi;) .hyrje1:-moz-mbajtës vendi (opaciteti: 1; tranzicioni: tejdukshmëria 0,3 s lehtësi;) .hyrja1:-ms-input-mbajtësi i vendit (opaciteti: 1; tranzicioni: opaciteti 0,3s lehtësia;) .hyrja1 :fokus: :-webkit-input-placeholder (opacity: 0; tranzicioni: opacity 0.3s ease;) .input1:focus::-moz-placeholder (opacity: 0; tranzicioni: opacity 0.3s easy;) .input1:fokus :-moz -mbajtës vendi (opacity: 0; tranzicioni: opacity 0.3s lehtësi;) .input1:focus:-ms-input-placeholder (opacity: 0; tranzicioni: opacity 0.3s ease;) fokus*/ .input2::-webkit-input -mbajtës vendi (indent-tekst: 0 px; tranzicioni: tekst-indent 0,3s lehtësi;) .input2::-moz-vendndodhës (indent-tekst: 0px; tranzicioni: tekst-indent 0,3s lehtësi;) .input2:-moz- mbajtës i vendndodhjes (indent-tekst: 0px; tranzicioni: tekst-indent 0,3s lehtësi;).input2:-ms-input-placeholde r(indenti i tekstit: 0px; tranzicioni: tekst-indent 0,3s lehtësi;) .input2:fokus::-webkit-input-placeholder (tekst-indent: 500px; tranzicioni: tekst-indent 0,3s lehtësi;) tekst-indent: 500px; tranzicioni: tekst-indent 0.3s ease;) .input2:fokus:-moz-vendndodhës (indent-tekst: 500px; tranzicion: tekst-indent 0.3s lehtësi;) .input2:fokus:-ms-input-placeholder (indent-tekst: 500px; tranzicion : text-indent 0.3s ease;) /* zhvendoseni mbajtësin e vendndodhjes poshtë në fokus */ .input3::-webkit-input-placeholder (lartësia e linjës: 20 px; tranzicioni: lartësia e vijës 0.5s lehtësia;) .input3:: -moz-placeholder (line-height: 20px; tranzicioni: line-height 0.5s ease;) -height 0.5s ease;) .input3:-ms-input-placeholder (line-height: 20px; tranzicioni: line-height 0.5 s ease;) .input3:fokus::-webkit-input-placeholder (lartësia e linjës: 100px; tranzicioni: lartësia e linjës 0.5s lehtësia;) .hyrja3:fokusimi::-moz-vendosja (lartësia e linjës: 100px; tranzicioni: lartësia e vijës 0,5 s lehtësi;) er (lartësia e vijës: 100 px; .input3:fokus:-ms-input-vendndodhës (lartësia e linjës: 100 px; tranzicioni: lartësia e linjës 0,5 s lehtësia;) Shpresoj se ju duket e dobishme. Shkruani komente dhe sugjerime në komente.
Një pseudo element që përcakton stilin e tekstit të shpejtë të krijuar nga atributi mbajtës i vendndodhjes. Ju mund të përdorni vetitë për të ndryshuar pamjen e tekstit, për shembull, të vendosni fontin dhe ngjyrën.
Sintaksë
Përzgjedhësi::mbajtësi i vendit ( ... )
Shënimi
Përshkrim Shembull
<тип>
Përcakton llojin e vlerës. <размер>
A&&B Vlerat duhet të dalin në rendin e specifikuar. <размер> && <цвет>
A | B Tregon që vetëm një nga vlerat e sugjeruara (A ose B) duhet të zgjidhet. normale | kapele të vogla
A || B Çdo vlerë mund të përdoret më vete ose në kombinim me të tjerat në çdo mënyrë. gjerësia || numëroj
Vlerat e grupeve. [ kulture || kryq]
*
Përsëriteni zero ose më shumë herë. [,<время>]*
+
Përsëriteni një ose më shumë herë. <число>+
?
Lloji, fjala ose grupi i specifikuar është opsional. futur?
(A, B) Përsëriteni të paktën A, por jo më shumë se B herë. <радиус>{1,4}
#
Përsëriteni një ose më shumë herë të ndara me presje. <время>#
Shembull
vendmbajtes
Rezultati i shembullit është paraqitur në Fig. një.
Oriz. 1. Përdorimi::mbajtësi i vendit
shënim
Internet Explorer përdor pseudo-klasën :-ms-input-placeholder.
Microsoft Edge përdor pseudoelementin ::-ms-input-placeholder.
Chrome para versionit 57, Opera para versionit 44, Safari para versionit 10.1 dhe Android përdorin pseudoelementin ::-webkit-input-placeholder.
Firefox nga versioni 4 deri në 19 përdor pseudo-class :-moz-placeholder .
Firefox para versionit 51 përdor pseudoelementin ::-moz-placeholder.
Shfletuesit
Shfletuesit
Shënimi i mëposhtëm përdoret në tabelën e shfletuesit.
Nëse nuk jeni të njohur me atributin e mbajtësit të vendndodhjes, le të shpjegojmë pak se çfarë është dhe ku përdoret. Përdoret në fushat e hyrjes së formës. Atributi shfaq një mbishkrim në fushën e hyrjes, që përfaqëson rolin e një aluzion. Më parë në faqen tonë kishte një shembull duke përdorur javascript, ana pozitive e kësaj metode është përputhshmëria e ndër-shfletuesve. Tani le të flasim për stilimin e atributit të mbajtësit të vendit, i cili përdoret në elementet hyrëse dhe të zonës së tekstit.
Kodi për fushën e hyrjes në shembullin tonë do të duket diçka si kjo:
Në dalje, marrim fushën e mëposhtme:
Tani le të imagjinojmë se duhet të stilojmë mbajtësin e vendit, për këtë duhet të shkruajmë një grup rregullash në CSS:
::-webkit-input-placeholder ( ngjyra: #c1c1c1; ) ::-moz-placeholder ( ngjyra: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( ngjyra: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( ngjyra: #c1c1c1; )
Ne marrim:
Ne nuk mund t'i ndryshojmë të gjitha vetitë, por një listë e shumicës së tyre të mbështetur nga shfletuesit modernë është dhënë më poshtë:
font(gjithashtu vetitë e lidhura)
sfond(gjithashtu vetitë e lidhura)
ngjyrë
ndarja e fjalëve
ndarja e shkronjave
tekst-dekorim
vertikal-drejtuar
tekst-transformim
vija e gjatesise
dhëmbëzimi i tekstit
tejmbushje teksti
errësirë
Në shfletues të ndryshëm, rregulli shkruhet ndryshe, sepse. për sa kohë që nuk ka një standard të vetëm, ky grup rekordesh vazhdon të jetë i rëndësishëm. Në shfletuesin IE, si dhe firefox nën versionin 18, mbajtësi i vendndodhjes perceptohet si një pseudo-klasë, dhe në shfletuesit e rinj firefox, webkit dhe blink perceptohen si një pseudo-element.
Shkurtoni tekstin në mbajtësin e vendit
Ndonjëherë sugjerimet mund të jenë aq të gjata sa nuk mund të futen plotësisht në fushën e hyrjes. Për këto qëllime, mund të përdorni gjithashtu veti shtesë që do të shkurtojnë tekstin e mbajtësit të vendeve në fushën e hyrjes.
Hyrja ( text-overflow:ellipsis; ) hyrja::-moz-placeholder ( text-overflow:ellipsis; ) hyrja:-moz-placeholder ( text-overflow:ellipsis; ) hyrja:-ms-input-placeholder ( text-overflow:ellipsis :elipsis;)
Si rezultat, ne marrim një fushë hyrëse me një mbajtës vendi si ky:
Fshehni tekstin kur klikoni
Si parazgjedhje, çdo shfletues interpreton ndryshe përgjigjen e mbajtësit të vendndodhjes. Në disa shfletues, ai fshihet menjëherë kur klikoni në fushë, në të tjerët fshihet nëse ka të paktën një karakter në fushën e hyrjes. Le ta bëjmë atë në mënyrë që teksti të fshihet kur klikoni në fushë, e njëjta gjë në të gjithë shfletuesit.
:focus::-webkit-input-placeholder ( ngjyra: transparente; ) :focus::-moz-placeholder ( ngjyra: transparente; ) :focus:-moz-placeholder ( ngjyra: transparent; ) :fokus:-ms-input -mbajtës vendi (ngjyra: transparente; )
Ne marrim këtë veprim:
Vendmbajtësi është një pseudo-klasë ose pseudo-element që është përgjegjës për shfaqjen e emrit të fushës. Në thelb, kjo është etiketa (le ta quajmë kështu për thjeshtësi) në të cilën futni një fjalë dhe përdoruesi e sheh atë brenda. Një lloj sugjerimi ose emri për secilën fushë të formularit.
Çdo shfletues e trajton këtë etiketë ndryshe, dhe stili i tij lë shumë për të dëshiruar. Për të ndryshuar stilet e paracaktuara, thjesht shtoni disa rreshta kodi në skedarin e stilit. Nuk ka asgjë të vështirë.
Duhet mbajtur parasysh e vërteta se jo të gjithë ne mund të ndryshojmë.
Ndër shumëllojshmërinë e stileve, në këtë rast, gjërat e mëposhtme janë në dispozicion për ne:
- font-weight - vendosja e peshës së tekstit
- madhësia e shkronjave - zgjedhja e madhësisë së tekstit
- font-family - përzgjedhje e shkronjave
- sfond — sfond dhe imazh sfondi
- ngjyra - ngjyra e tekstit
- ndarja e fjalëve - vendosja e hapësirës midis fjalëve
- ndarja e shkronjave - vendosni hapësirën midis shkronjave
- tekst-zbukurim - zgjedhje e dekorimit të fjalës. E nënvizuar, e shënuar etj.
- vertikal-align - vendos shtrirje vertikale
- tekst-transformim - zgjedhja e ndryshimit të tekstit. Të gjitha shkronjat e mëdha ose të vogla, etj.
- lartësia e vijës - hapësira midis rreshtave
- tekst-indent - vendos indentacionin e majtë të rreshtit të parë të një paragrafi
- tejmbushja e tekstit - zgjedhja e shfaqjes së tekstit që nuk përshtatet në bllok (fshihni ose prisni dhe shtoni elipsë)
- opacity - zgjidhni transparencën e elementit
Tani që kemi kuptuar stilet e disponueshme, mund të fillojmë të dekorojmë, për këtë do të shtojmë stilet e mëposhtme:
::-webkit-input-placeholder ( ngjyra: #2cb04d; )
::-moz-placeholder ( ngjyra: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( ngjyra: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder ( ngjyra: #2cb04d; )
Pas shtimit të këtyre rreshtave, ngjyra e titujve brenda fushave të formularit do të ndryshojë dhe në çdo shfletues do të jetë e njëjtë. Këtu mund të shtoni stile shtesë.
Për shembull, ky stil
::-webkit-input-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
::-moz-placeholder (ngjyra:#2cb04d; madhësia e shkronjave:1.5em; pesha e shkronjave:600;) /*Firefox 19+*/
:-moz-placeholder (ngjyra:#2cb04d; madhësia e shkronjave:1.5em; pesha e shkronjave:600;) /*Firefox 18-*/
:-ms-input-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
Shtoni tekstin me ngjyra, madhësi të madhe dhe peshë mesatare. Nëse shtoni një veçori shtesë −
text-overflow:ellipsis atëherë teksti do të shkurtohet për t'iu përshtatur kufirit, me një elipsë të shtuar në fund.
Ekziston një tjetër veçori interesante, falë shfaqjes së animacionit në css (stile), mund të vendosni një fshehje të bukur kur vendosni kursorin në fushë. Më parë, kjo bëhej përmes js (skripteve)
Input::-webkit-input-placeholder (opacity: 1; tranzicioni: opacity 0,3s lehtësi;)
.hyrje::-moz-vendndodhës (opaciteti: 1; tranzicioni: opaciteti 0,3s lehtësi;)
.hyrja:-moz-mbajtës vendi (opaciteti: 1; tranzicioni: opaciteti 0,3s lehtësi;)
.input:-ms-input-placeholder (opacity: 1; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus::-webkit-input-placeholder (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus::-moz-vendndodhës (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus:-moz-vendndodhës (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus:-ms-input-vendndodhës (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
Shtimi i stileve të tilla do të bëjë që mbajtësi i vendit të zbehet kur kursori vendoset në fushë
.hyrja është klasa e elementit të formës. Në mënyrë që stilet të funksionojnë, kodi i fushës së formularit duhet të duket si ky:
Ose mund të përdorni klasën e elementeve. Kështu, ju mund të vendosni stile të ndryshme për secilën formë.
.kontaktet-forma e futjes së formularit::-webkit-input-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
.kontaktet-forma e hyrjes së formularit::-moz-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)/*Firefox 19+*/
Hyrja e formës .kontaktet-forma:-moz-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)/*Firefox 18-*/
Hyrja e formës .kontakte-forma:-ms-input-mbajtës vendi (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
Këtu janë disa mënyra të thjeshta se si mund të bëni një dizajn vërtet të bukur të formularit.
Atributi mbajtës i vendndodhjes funksionon vetëm për Dhe
Një metodë e lashtë memorie që ndryshon vlerën e JavaScript
Atributi mbajtës i vendndodhjes përdoret për të thirrur në veprim brenda elementeve të hyrjes boshe dhe zonës së tekstit. Në këtë artikull, ne do të shikojmë mundësitë e stilimit të vendmbajtësit të një teksti, si dhe disa truke që do ta bëjnë atë më të përshtatshëm dhe funksional.
Pra, le të fillojmë me një shembull për ata që nuk e dinë se çfarë është një vendmbajtes.
html
Stili i mbajtësit të vendit mund të ndryshohet duke përdorur grupin e mëposhtëm të rregullave css:
css
::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (ngjyra:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (ngjyra:#c0392b;)Duket e frikshme, apo jo? Fakti është se kjo ende nuk është në standarde. Secili shfletues ka implementuar mbështetjen për stilimin e mbajtësve të vendeve në mënyrën e vet.
Në IE dhe firefox më të vjetër (para-18) mbajtësi i vendndodhjes konsiderohet një pseudo-klasë, ndërsa në firefox më të ri, webkit dhe blink është një pseudo-element.
Le të shohim se çfarë ndodhi:
Duhet të them që jo të gjitha vetitë e mundshme css janë të mbështetura. Shumica e shfletuesve modernë ju lejojnë të ndryshoni:
- font (dhe vetitë e ngjashme)
- sfond (dhe vetitë e lidhura)
- ngjyrë
- ndarja e fjalëve
- ndarja e shkronjave
- tekst-dekorim
- vertikal-drejtuar
- tekst-transformim
- vija e gjatesise
- dhëmbëzimi i tekstit
- tejmbushje teksti
- errësirë
Po sikur mbajtësi i vendit të mos përshtatet?
Ndonjëherë fushat e futjes së tekstit zvogëlohen në gjerësi për shkak të veçorive të paraqitjes, veçanërisht në pajisjet celulare. Në këtë rast, teksti i gjatë i mbajtësit të vendit do të pritet në mënyrë të shëmtuar. Për ta parandaluar këtë, mund të përdorni tekst-overflow: elipsis . Kjo sintaksë do të funksionojë në të gjithë shfletuesit e rinj.
css
input (tekst-mbushje:ellipsis;) hyrje::-moz-mbajtësi i vendit (tekst-mbushje:ellipsis;) hyrje:-moz-mbajtësi i vendit (tekst-mbirje:ellipsis;) futje:-ms-input-mbrojtës i vendit (tekst-mbimbytje :elipsis;)Si të fshehni mbajtësin e vendit në fokus?
Fshehja e një mbajtëse vendi ndodh në mënyra të ndryshme.
- në disa shfletues kur fokusohet me hyrje
- në shfletues të tjerë nëse është futur të paktën një karakter
Më pëlqen më shumë opsioni i parë. Për të vendosur këtë sjellje në të gjithë shfletuesit që mbështesin mbajtësin e vendndodhjes, ne përcaktojmë rregullat e mëposhtme css:
css
:focus::-webkit-input-placeholder (ngjyra: transparente) :fokus::-moz-placeholder (ngjyra: transparent) :focus:-moz-placeholder (ngjyra: transparent) :fokus:-ms-input-placeholder ( ngjyra: transparente)Duke e fshehur bukur mbajtësin e vendit
Ju gjithashtu mund të shtoni një tranzicion për të shfaqur dhe fshehur mbajtësin e vendeve:
css
/* zbeh opacitetin e mbajtësit të vendndodhjes në fokus */ .input1::-webkit-input-placeholder (opacity: 1; tranzicioni: opacity 0.3s lehtësi;) .input1::-moz-placeholder (opacity: 1; tranzicioni: opacity 0.3s lehtësi;) .hyrje1:-moz-mbajtës vendi (opaciteti: 1; tranzicioni: tejdukshmëria 0,3 s lehtësi;) .hyrja1:-ms-input-mbajtësi i vendit (opaciteti: 1; tranzicioni: opaciteti 0,3s lehtësia;) .hyrja1 :fokus: :-webkit-input-placeholder (opacity: 0; tranzicioni: opacity 0.3s ease;) .input1:focus::-moz-placeholder (opacity: 0; tranzicioni: opacity 0.3s easy;) .input1:fokus :-moz -mbajtës vendi (opacity: 0; tranzicioni: opacity 0.3s lehtësi;) .input1:focus:-ms-input-placeholder (opacity: 0; tranzicioni: opacity 0.3s ease;) fokus*/ .input2::-webkit-input -mbajtës vendi (indent-tekst: 0 px; tranzicioni: tekst-indent 0,3s lehtësi;) .input2::-moz-vendndodhës (indent-tekst: 0px; tranzicioni: tekst-indent 0,3s lehtësi;) .input2:-moz- mbajtës i vendndodhjes (indent-tekst: 0px; tranzicioni: tekst-indent 0,3s lehtësi;).input2:-ms-input-placeholde r(indenti i tekstit: 0px; tranzicioni: tekst-indent 0,3s lehtësi;) .input2:fokus::-webkit-input-placeholder (tekst-indent: 500px; tranzicioni: tekst-indent 0,3s lehtësi;) tekst-indent: 500px; tranzicioni: tekst-indent 0.3s ease;) .input2:fokus:-moz-vendndodhës (indent-tekst: 500px; tranzicion: tekst-indent 0.3s lehtësi;) .input2:fokus:-ms-input-placeholder (indent-tekst: 500px; tranzicion : text-indent 0.3s ease;) /* zhvendoseni mbajtësin e vendndodhjes poshtë në fokus */ .input3::-webkit-input-placeholder (lartësia e linjës: 20 px; tranzicioni: lartësia e vijës 0.5s lehtësia;) .input3:: -moz-placeholder (line-height: 20px; tranzicioni: line-height 0.5s ease;) -height 0.5s ease;) .input3:-ms-input-placeholder (line-height: 20px; tranzicioni: line-height 0.5 s ease;) .input3:fokus::-webkit-input-placeholder (lartësia e linjës: 100px; tranzicioni: lartësia e linjës 0.5s lehtësia;) .hyrja3:fokusimi::-moz-vendosja (lartësia e linjës: 100px; tranzicioni: lartësia e vijës 0,5 s lehtësi;) er (lartësia e vijës: 100 px; .input3:fokus:-ms-input-vendndodhës (lartësia e linjës: 100 px; tranzicioni: lartësia e linjës 0,5 s lehtësia;)Shpresoj se ju duket e dobishme. Shkruani komente dhe sugjerime në komente.
Një pseudo element që përcakton stilin e tekstit të shpejtë të krijuar nga atributi mbajtës i vendndodhjes. Ju mund të përdorni vetitë për të ndryshuar pamjen e tekstit, për shembull, të vendosni fontin dhe ngjyrën.
Sintaksë
Përzgjedhësi::mbajtësi i vendit ( ... )
Shënimi
Përshkrim | Shembull | |
---|---|---|
<тип> | Përcakton llojin e vlerës. | <размер> |
A&&B | Vlerat duhet të dalin në rendin e specifikuar. | <размер> && <цвет> |
A | B | Tregon që vetëm një nga vlerat e sugjeruara (A ose B) duhet të zgjidhet. | normale | kapele të vogla |
A || B | Çdo vlerë mund të përdoret më vete ose në kombinim me të tjerat në çdo mënyrë. | gjerësia || numëroj |
Vlerat e grupeve. | [ kulture || kryq] | |
* | Përsëriteni zero ose më shumë herë. | [,<время>]* |
+ | Përsëriteni një ose më shumë herë. | <число>+ |
? | Lloji, fjala ose grupi i specifikuar është opsional. | futur? |
(A, B) | Përsëriteni të paktën A, por jo më shumë se B herë. | <радиус>{1,4} |
# | Përsëriteni një ose më shumë herë të ndara me presje. | <время># |
Shembull
Rezultati i shembullit është paraqitur në Fig. një.
Oriz. 1. Përdorimi::mbajtësi i vendit
shënim
Internet Explorer përdor pseudo-klasën :-ms-input-placeholder.
Microsoft Edge përdor pseudoelementin ::-ms-input-placeholder.
Chrome para versionit 57, Opera para versionit 44, Safari para versionit 10.1 dhe Android përdorin pseudoelementin ::-webkit-input-placeholder.
Firefox nga versioni 4 deri në 19 përdor pseudo-class :-moz-placeholder .
Firefox para versionit 51 përdor pseudoelementin ::-moz-placeholder.
Shfletuesit
Shfletuesit
Shënimi i mëposhtëm përdoret në tabelën e shfletuesit.
Nëse nuk jeni të njohur me atributin e mbajtësit të vendndodhjes, le të shpjegojmë pak se çfarë është dhe ku përdoret. Përdoret në fushat e hyrjes së formës. Atributi shfaq një mbishkrim në fushën e hyrjes, që përfaqëson rolin e një aluzion. Më parë në faqen tonë kishte një shembull duke përdorur javascript, ana pozitive e kësaj metode është përputhshmëria e ndër-shfletuesve. Tani le të flasim për stilimin e atributit të mbajtësit të vendit, i cili përdoret në elementet hyrëse dhe të zonës së tekstit.
Kodi për fushën e hyrjes në shembullin tonë do të duket diçka si kjo:
Në dalje, marrim fushën e mëposhtme:
Tani le të imagjinojmë se duhet të stilojmë mbajtësin e vendit, për këtë duhet të shkruajmë një grup rregullash në CSS:
::-webkit-input-placeholder ( ngjyra: #c1c1c1; ) ::-moz-placeholder ( ngjyra: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( ngjyra: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( ngjyra: #c1c1c1; )
Ne marrim:
Ne nuk mund t'i ndryshojmë të gjitha vetitë, por një listë e shumicës së tyre të mbështetur nga shfletuesit modernë është dhënë më poshtë:
font(gjithashtu vetitë e lidhura)
sfond(gjithashtu vetitë e lidhura)
ngjyrë
ndarja e fjalëve
ndarja e shkronjave
tekst-dekorim
vertikal-drejtuar
tekst-transformim
vija e gjatesise
dhëmbëzimi i tekstit
tejmbushje teksti
errësirë
Në shfletues të ndryshëm, rregulli shkruhet ndryshe, sepse. për sa kohë që nuk ka një standard të vetëm, ky grup rekordesh vazhdon të jetë i rëndësishëm. Në shfletuesin IE, si dhe firefox nën versionin 18, mbajtësi i vendndodhjes perceptohet si një pseudo-klasë, dhe në shfletuesit e rinj firefox, webkit dhe blink perceptohen si një pseudo-element.
Shkurtoni tekstin në mbajtësin e vendit
Ndonjëherë sugjerimet mund të jenë aq të gjata sa nuk mund të futen plotësisht në fushën e hyrjes. Për këto qëllime, mund të përdorni gjithashtu veti shtesë që do të shkurtojnë tekstin e mbajtësit të vendeve në fushën e hyrjes.
Hyrja ( text-overflow:ellipsis; ) hyrja::-moz-placeholder ( text-overflow:ellipsis; ) hyrja:-moz-placeholder ( text-overflow:ellipsis; ) hyrja:-ms-input-placeholder ( text-overflow:ellipsis :elipsis;)
Si rezultat, ne marrim një fushë hyrëse me një mbajtës vendi si ky:
Fshehni tekstin kur klikoni
Si parazgjedhje, çdo shfletues interpreton ndryshe përgjigjen e mbajtësit të vendndodhjes. Në disa shfletues, ai fshihet menjëherë kur klikoni në fushë, në të tjerët fshihet nëse ka të paktën një karakter në fushën e hyrjes. Le ta bëjmë atë në mënyrë që teksti të fshihet kur klikoni në fushë, e njëjta gjë në të gjithë shfletuesit.
:focus::-webkit-input-placeholder ( ngjyra: transparente; ) :focus::-moz-placeholder ( ngjyra: transparente; ) :focus:-moz-placeholder ( ngjyra: transparent; ) :fokus:-ms-input -mbajtës vendi (ngjyra: transparente; )
Ne marrim këtë veprim:
Vendmbajtësi është një pseudo-klasë ose pseudo-element që është përgjegjës për shfaqjen e emrit të fushës. Në thelb, kjo është etiketa (le ta quajmë kështu për thjeshtësi) në të cilën futni një fjalë dhe përdoruesi e sheh atë brenda. Një lloj sugjerimi ose emri për secilën fushë të formularit.
Çdo shfletues e trajton këtë etiketë ndryshe, dhe stili i tij lë shumë për të dëshiruar. Për të ndryshuar stilet e paracaktuara, thjesht shtoni disa rreshta kodi në skedarin e stilit. Nuk ka asgjë të vështirë.
Duhet mbajtur parasysh e vërteta se jo të gjithë ne mund të ndryshojmë.
Ndër shumëllojshmërinë e stileve, në këtë rast, gjërat e mëposhtme janë në dispozicion për ne:
- font-weight - vendosja e peshës së tekstit
- madhësia e shkronjave - zgjedhja e madhësisë së tekstit
- font-family - përzgjedhje e shkronjave
- sfond — sfond dhe imazh sfondi
- ngjyra - ngjyra e tekstit
- ndarja e fjalëve - vendosja e hapësirës midis fjalëve
- ndarja e shkronjave - vendosni hapësirën midis shkronjave
- tekst-zbukurim - zgjedhje e dekorimit të fjalës. E nënvizuar, e shënuar etj.
- vertikal-align - vendos shtrirje vertikale
- tekst-transformim - zgjedhja e ndryshimit të tekstit. Të gjitha shkronjat e mëdha ose të vogla, etj.
- lartësia e vijës - hapësira midis rreshtave
- tekst-indent - vendos indentacionin e majtë të rreshtit të parë të një paragrafi
- tejmbushja e tekstit - zgjedhja e shfaqjes së tekstit që nuk përshtatet në bllok (fshihni ose prisni dhe shtoni elipsë)
- opacity - zgjidhni transparencën e elementit
Tani që kemi kuptuar stilet e disponueshme, mund të fillojmë të dekorojmë, për këtë do të shtojmë stilet e mëposhtme:
::-webkit-input-placeholder ( ngjyra: #2cb04d; )
::-moz-placeholder ( ngjyra: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( ngjyra: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder ( ngjyra: #2cb04d; )
Pas shtimit të këtyre rreshtave, ngjyra e titujve brenda fushave të formularit do të ndryshojë dhe në çdo shfletues do të jetë e njëjtë. Këtu mund të shtoni stile shtesë.
Për shembull, ky stil
::-webkit-input-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
::-moz-placeholder (ngjyra:#2cb04d; madhësia e shkronjave:1.5em; pesha e shkronjave:600;) /*Firefox 19+*/
:-moz-placeholder (ngjyra:#2cb04d; madhësia e shkronjave:1.5em; pesha e shkronjave:600;) /*Firefox 18-*/
:-ms-input-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
Shtoni tekstin me ngjyra, madhësi të madhe dhe peshë mesatare. Nëse shtoni një veçori shtesë −
text-overflow:ellipsis atëherë teksti do të shkurtohet për t'iu përshtatur kufirit, me një elipsë të shtuar në fund.
Ekziston një tjetër veçori interesante, falë shfaqjes së animacionit në css (stile), mund të vendosni një fshehje të bukur kur vendosni kursorin në fushë. Më parë, kjo bëhej përmes js (skripteve)
Input::-webkit-input-placeholder (opacity: 1; tranzicioni: opacity 0,3s lehtësi;)
.hyrje::-moz-vendndodhës (opaciteti: 1; tranzicioni: opaciteti 0,3s lehtësi;)
.hyrja:-moz-mbajtës vendi (opaciteti: 1; tranzicioni: opaciteti 0,3s lehtësi;)
.input:-ms-input-placeholder (opacity: 1; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus::-webkit-input-placeholder (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus::-moz-vendndodhës (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus:-moz-vendndodhës (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
.input:fokus:-ms-input-vendndodhës (opacity: 0; tranzicioni: opacity 0,3s lehtësi;)
Shtimi i stileve të tilla do të bëjë që mbajtësi i vendit të zbehet kur kursori vendoset në fushë
.hyrja është klasa e elementit të formës. Në mënyrë që stilet të funksionojnë, kodi i fushës së formularit duhet të duket si ky:
Ose mund të përdorni klasën e elementeve. Kështu, ju mund të vendosni stile të ndryshme për secilën formë.
.kontaktet-forma e futjes së formularit::-webkit-input-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
.kontaktet-forma e hyrjes së formularit::-moz-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)/*Firefox 19+*/
Hyrja e formës .kontaktet-forma:-moz-placeholder (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)/*Firefox 18-*/
Hyrja e formës .kontakte-forma:-ms-input-mbajtës vendi (ngjyra: #2cb04d; madhësia e shkronjave: 1,5em; pesha e shkronjave: 600;)
Këtu janë disa mënyra të thjeshta se si mund të bëni një dizajn vërtet të bukur të formularit.