Iestatiet viettura krāsu. Kā mainīt rīka padoma teksta krāsu vietturā, izmantojot CSS stilus? Skaisti paslēpj vietturi
Parasti ievades un teksta apgabala viettura atribūts tiek izmantots, lai šajos elementos nodrošinātu aicinājumu uz darbību. Šajā piezīmē es aprakstīšu vairākas vietturu teksta stila veidošanas iespējas, kā arī to animācijas iespējas
Tātad mūsu viettura teksta krāsu var mainīt, izmantojot, piemēram, šādu CSS noteikumu kopu:
::-webkit-input-placeholder ( krāsa : #c0392b ;) ::-moz-placeholder ( krāsa : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( krāsa : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( krāsa : #c0392b ;)
Koda garums šāda vienkārša īpašuma veidošanai ir saistīts ar vienota standarta trūkumu, un tāpēc katra pārlūkprogramma ir ieviesusi vietturu stila atbalstu savā veidā.
Turklāt ne visi tiek atbalstīti css īpašības. Šeit ir saraksts ar precīzi atbalstītajiem rekvizītiem:
fonts (un saistīts)
fons (un saistīts)
krāsa
vārdu atstarpes
burtu atstarpes
teksta dekorēšana
vertikāli izlīdzināt
teksta pārveidošana
līnijas augstums
teksta atkāpe
teksta pārpilde
necaurredzamība
Gadās arī, ka viettura teksts “izstiepjas” pāri ievades vai teksta apgabala elementa platumam (parasti mobilajām ierīcēm). Tajā pašā laikā tas tiek automātiski nogriezts neizskatīgs.
CSS rekvizīts, piemēram, teksta pārpilde: elipsi palīdzēs mums novērst šo problēmu, kas viettura apgrieztajam laukumam pievienos estētisku elipsi. Stīlos mēs rakstām šādi:
ievade [ vietturis ] ( text-overflow : elipsis ;) ievade ::-moz-placeholder ( text-overflow : elipsis ;) ievade :-moz-placeholder ( text-overflow : elipsis ;) ievade :-ms-input-placeholder ( teksta pārpilde: elipses ;)
Lai mūsu vietturiem pievienotu vēl vairāk estētikas, ir iespējams pievienot tā paslēpšanas efektu, kad attiecīgais elements tiek fokusēts.
Daži piemēri šādai slēpšanai ar animācijas elementiem:
/* vienmērīga viettura caurspīdīguma maiņa fokusā */.input ::-webkit-input-placeholder ( necaurredzamība : 1 ; pāreja : necaurredzamība 0.3s vieglums ;) .input ::-moz-placeholder ( necaurredzamība : 1 ; pāreja : necaurredzamība 0.3s vieglums ;).input :-moz- vietturis (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;).input:-ms-input-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;).ievade (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums; ) .input :focus::-moz-placeholder ( necaurredzamība : 0 ; pāreja : necaurredzamība 0.3s vieglums ;).input :focus:-moz-placeholder ( necaurredzamība : 0 ; pāreja : necaurredzamība 0.3s vieglums ;).input :focus :-ms-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;) /* pārvietot vietturi pa labi, kad tas ir fokusēts */.input ::-webkit-input-placeholder ( text-indent : 0px ; pāreja : text-indent 0,3s vieglums ;) .input ::-moz-placeholder ( text-indent : 0px ; pāreja : teksta atkāpe 0,3s vieglums ;).input :-moz-placeholder ( text-indent : 0px ; pāreja : text-indent 0,3s easy ;).input :-ms-input-placeholder ( text-indent : 0px ; pāreja : text-indent 0,3s easy ;).ievade :focus::-webkit-input-placeholder( teksta atkāpe : 500 pikseļi ; pāreja : teksta atkāpe 0,3 s vieglums ;).input :focus::-moz-placeholder ( text-indent : 500px ; pāreja : teksta atkāpe 0,3s vieglums ;).input :focus:- moz-placeholder ( text-indent : 500px ; transfer: text-indent 0,3s easy ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; pāreja : text-indent 0.3s easy ;) /* pārvietot vietturi uz leju, kad tas ir fokusēts */.int ;).input :-moz-placeholder ( line-height : 20px ; pāreja : line-height 0.5s vieglums ;).input :-ms-input-placeholder ( line-height : 20px ; pāreja : line-height 0.5s vieglums ;).ievade :focus::-webkit-input-placeholder( līnijas augstums : 100 pikseļi ; pāreja : līnijas augstums 0,5 s vieglums ;).input :focus::-moz-placeholder ( line-height : 100px ; pāreja : līnijas augstums 0,5s vieglums ;).input :focus:- moz-placeholder ( line-height : 100px ; pāreja : line-height 0,5s vieglums ;).input :focus:-ms-input-placeholder ( line-height : 100px ; pāreja : līnijas augstums 0,5s vieglums ;)
Beigsim šeit.
Cenšoties samazināt formu un samazināt vizuālo troksni, dizaineri
Slikti
Labi
Stils: mainiet viettura krāsu CSS
Mainiet ievades lauka stilu, izmantojot vietturi CSS
Slikti
Viettura efekts
Viettura atribūts darbojas tikai Un
Sena atmiņas metode, kas maina JavaScript vērtību
Sveiki! Šodien jūs nevienu nepārsteigsit, izmantojot vietturi ievadei. Vietturis ir pagaidu teksts ar piemēru ievades iekšpusē, kas pazūd, ievadot tekstu. Mēs šodien mēģināsim uzrakstīt viettura CSS stilu.
Uzdevums: izveidojiet savu CSS stilu vietturim
Pieņemsim, ka mums ir stilīga vietne, kuras ievadē tiek izmantots vietturis. Ir jāpanāk, lai viettura pelēkais, garlaicīgais teksta stils atbilstu vietnes vispārējam stilam. Kā to var panākt? Uzreiz teikšu, ka tas vēl nedarbojas visās pārlūkprogrammās. Konkrētāk, tas nedarbojas vispār IE versijās 9 un jaunākās versijās 10 un vēlāk tas joprojām darbojas ar lielām grūtībām. Firefox un tīmekļa komplektu pārlūkprogrammas ir cits jautājums.
Risinājums: css stils vietturim
Tātad, mēs esam izvirzījuši uzdevumu, kā mēs to atrisināsim?
Vispirms izveidosim testēšanas laukumu:
Gatavs, tagad apskatīsim, ko varam darīt ar stilu: Webkit un mozilla ir savi modifikatori, kas ļauj vietturim piešķirt īpašu stilu: ::-webkit-input-placeholder un:-moz-placeholder. Apskatīsim, kā tos izmantot:
Aprakstīsim pašas ievades stilu un tajā esošo tekstu (piemērā zilā krāsa kontrastam):
Ievade (platums: 250 pikseļi; krāsa: zila; fonta svars: normāls; fonta stils: normāls; )
Tagad rakstīsim īpašu stilu viettura tekstam šajā ievadē Webkit pārlūkprogrammām (Chrome, Safari, Opera):
Ievade::-webkit-input-placeholder( krāsa: sarkana; fonta stils: slīpraksts; fonta svars: treknraksts; )
Viettura tekstu padarīsim sarkanu, treknrakstu slīprakstā. Ņemiet vērā, ka atšķirībā no citām CSS pseidoklasēm, kuras ir atdalītas ar vienu kolu, viettura stils tīmekļa komplektā ir atdalīts ar dubultu kolu.
Tagad rakstīsim tieši tādu pašu stilu Mozilla Firefox pārlūkprogrammas:
Ievade:-moz-placeholder( krāsa: sarkana; fonta stils: slīpraksts; fonta svars: treknraksts; )
Gatavs. CSS stils vietturim, protams, varat rakstīt jebkuru, kas ir piemērotāks jūsu dizainam. Darba demonstrāciju var apskatīt vietnē
Viettura atribūts tiek izmantots aicinājumiem uz darbību tukšos ievades un teksta apgabala elementos. Šajā rakstā apskatīsim viettura teksta veidošanas iespējas, kā arī dažus trikus, kas to padarīs ērtāku un funkcionālāku.
Tātad, sāksim ar piemēru tiem, kas nezina, kas ir vietturis.
html
Viettura stilu var mainīt, izmantojot šādu css noteikumu kopu:
css
::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (color:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (color:#c0392b;) Tas izskatās biedējoši, vai ne? Fakts ir tāds, ka tas joprojām nav iekļauts standartos. Katra pārlūkprogramma savā veidā atbalsta vietturu stilu.
IE un vecākos Firefox (pirms 18) vietturis tiek uzskatīts par pseidoklasi, bet jaunajā Firefox, webkit un blink tas tiek uzskatīts par pseidoelementu.
Apskatīsim, kas notika:
Jāsaka, ka netiek atbalstīti visi iespējamie CSS rekvizīti. Vairākums modernās pārlūkprogrammasļauj mainīt:
- fonts (un saistītie rekvizīti)
- fons (un saistītie rekvizīti)
- krāsa
- vārdu atstarpes
- burtu atstarpes
- teksta dekorēšana
- vertikāli izlīdzināt
- teksta pārveidošana
- līnijas augstums
- teksta atkāpe
- teksta pārpilde
- necaurredzamība
Ko darīt, ja vietturis neder?
Dažreiz teksta ievades lauki tiek samazināti platumā izkārtojuma funkciju dēļ, jo īpaši uz mobilajām ierīcēm. Šajā gadījumā viettura garais teksts tiks nogriezts neizskatīgi. Lai to novērstu, varat izmantot teksta pārplūdi: elipsi. Šī sintakse darbosies visās jaunajās pārlūkprogrammās.
css
ievade (text-overflow:ellipsis;) input::-moz-placeholder (text-overflow:ellipsis;) input:-moz-placeholder (text-overflow:ellipsis;) input:-ms-input-placeholder (text-overflow) :elipse;) Kā fokusā paslēpt vietturi?
Viettura slēpšana notiek dažādos veidos.
- dažās pārlūkprogrammās, saņemot fokusu pēc ievades
- citās pārlūkprogrammās, ja ir ievadīta vismaz viena rakstzīme
Man labāk patīk pirmais variants. Lai iestatītu šo darbību visās pārlūkprogrammās, kas atbalsta vietturi, mēs definēsim šādus CSS noteikumus:
css
:focus::-webkit-input-placeholder (krāsa: caurspīdīga) :focus::-moz-placeholder (krāsa: caurspīdīga) :focus:-moz-placeholder (krāsa: caurspīdīga) :focus:-ms-input-placeholder ( krāsa: caurspīdīga) Skaisti paslēpj vietturi
Varat arī pievienot pāreju, lai rādītu un paslēptu vietturi:
css
/* vienmērīga viettura caurspīdīguma maiņa, kad fokuss 0,3 s vieglums;).input1:-moz-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;).input1:-ms-input-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;).input1 : fokuss::-webkit-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;).input1:focus::-moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;).input1:focus : -moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;) .input1:focus:-ms-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;) /* pārvietot vietturi pa labi, kad fokuss*/ .input2::-webkit-input-placeholder (text-indent: 0px; pāreja: teksta atkāpe: 0,3 s vieglums;) .input2::-moz-placeholder (text-indent: 0px; pāreja: teksta atkāpe 0,3 s vieglums;) .input2:-moz-placeholder (text-indent: 0px; pāreja: text-indent 0,3s easy;).input2:-ms-input-placeholder (text-indent: 0px); pāreja: teksta atkāpe 0,3 s viegla;).input2:focus::-webkit-input-placeholder (text-indent: 500 px; pāreja: teksta atkāpe 0,3 s vieglums;).input2:focus::-moz-placeholder ( teksta atkāpe: 500 pikseļi; pāreja: teksta atkāpe — 0,3 s vieglums;).input2:focus:-moz-placeholder (text-indent: 500 px; pāreja: teksta atkāpe — 0,3 s vieglums;).input2:focus:-ms- input-placeholder (teksta atkāpe: 500 pikseļi; pāreja: teksta atkāpe: 0,3 s vieglums;) /* pārvietot vietturi uz leju, kad tas ir fokusēts */ .input3::-webkit-input-placeholder (rindas augstums: 20 pikseļi; pāreja: līnija -height 0,5s easy;).input3::-moz-placeholder (line-height: 20px; pāreja: line-height 0,5s easy;).input3:-moz-placeholder (line-height: 20px; pāreja: līnija- augstums 0,5 s vieglums;).input3:-ms-input-placeholder (rindas augstums: 20 pikseļi; pāreja: līnijas augstums — 0,5 s vieglums;).input3:focus::-webkit-input-placeholder (rindas augstums: 100 pikseļi ; pāreja: līnijas augstums 0,5 s vieglums;).input3:focus::-moz-placeholder (line-height: 100px; pāreja: line-height 0,5s vieglums;).input3:focus:-moz-placeholder (rinda - augstums: 100 pikseļi; pāreja: līnijas augstums 0,5 s vieglums;) .input3:focus:-ms-input-placeholder (līnijas augstums: 100 pikseļi; pāreja: līnijas augstums — 0,5 s vieglums;) Es ceru, ka jums tas noderēs. Rakstiet komentārus un ieteikumus komentāros.
Vietturis ir pseidoklase vai pseidoelements, kas ir atbildīgs par lauka nosaukuma parādīšanu. Tā pamatā ir atzīme (vienkāršības labad sauksim to tā), kurā ievadāt vārdu, un lietotājs to redz iekšā. Katram formas laukam sava veida mājiens vai nosaukums.
Katra pārlūkprogramma apstrādā šo tagu atšķirīgi, un tā stils atstāj daudz vēlamo. Lai mainītu noklusējuma stilus, vienkārši pievienojiet pāris koda rindiņas stilu failam. Nav nekā sarežģīta.
Tomēr ir jāņem vērā, ka ne visu mēs varam mainīt.
No dažādiem stiliem šajā gadījumā mums ir pieejamas šādas lietas:
- font-weight — teksta svara iestatīšana
- fonta lielums — izvēlieties teksta lielumu
- font-family - fontu izvēle
- fons - fons un fona attēls
- krāsa — teksta krāsa
- vārdu atstarpes — iestatiet atstarpi starp vārdiem
- burtu atstarpes — iestatiet atstarpi starp burtiem
- text-decoration — vārdu dekorācijas izvēle. Pasvītrots, izsvītrots utt.
- vertical-align — iestatīt vertikālo izlīdzināšanu
- text-transform - teksta maiņas izvēle. Viss ar lielajiem vai mazajiem burtiem utt.
- line-height — atstarpes starp rindām
- text-indent — iestata kreiso atkāpi rindkopas pirmajai rindai
- teksta pārpilde — izvēle parādīt tekstu, kas neietilpst blokā (paslēpt vai apgriezt un pievienot elipsi)
- necaurredzamība — atlasiet elementa caurspīdīgumu
Tagad, kad esam sapratuši pieejamos stilus, varam sākt veidot, lai to izdarītu, pievienosim šādus stilus:
::-webkit-input-placeholder ( krāsa: #2cb04d; )
::-moz-placeholder ( krāsa: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( krāsa: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder ( krāsa: #2cb04d; )
Pēc šo rindu pievienošanas veidlapas laukos esošo nosaukumu krāsa mainīsies, un tā būs vienāda katrā pārlūkprogrammā. Šeit varat pievienot papildu stilus.
Piemēram, šis stils
::-webkit-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
::-moz-placeholder (color:#2cb04d; font-size:1.5em; font-weight:600;) /*Firefox 19+*/
:-moz-placeholder (color:#2cb04d; font-size:1.5em; font-weight:600;) /*Firefox 18-*/
:-ms-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
Pievienojiet krāsu liela izmēra un vidējais teksta svars. Ja pievienojat papildu īpašumu -
text-overflow:ellipsis, tad teksts tiks apgriezts, lai tas atbilstu laukam, un beigās tiks pievienota elipsi.
Ir vēl viens interesants īpašums: pateicoties animācijas parādīšanai css (stilos), jūs varat konfigurēt skaistu slēpšanu, novietojot kursoru laukā. Iepriekš tas tika darīts, izmantojot js (skriptus)
Ievade::-webkit-input-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input::-moz-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input:-moz-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input:-ms-input-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus::-webkit-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus::-moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus:-moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus:-ms-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
Šādu stilu pievienošana ļaus vietturim vienmērīgi izbalināt, kad kursors tiek novietots laukā
.input ir formas elementu klase. Lai stili darbotos, veidlapas lauka kodam vajadzētu izskatīties šādi:
Vai arī varat izmantot elementu klasi. Tādā veidā katrai veidlapai varat iestatīt dažādus stilus.
.contacts-form form input::-webkit-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
.contacts-form formas ievade::-moz-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)/*Firefox 19+*/
.contacts-form formas ievade:-moz-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)/*Firefox 18-*/
.contacts-form formas ievade:-ms-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
Šajos vienkāršajos veidos jūs varat izveidot patiešām skaistu formas dizainu.
Viettura atribūts darbojas tikai Un
Sena atmiņas metode, kas maina JavaScript vērtību
Sveiki! Šodien jūs nevienu nepārsteigsit, izmantojot vietturi ievadei. Vietturis ir pagaidu teksts ar piemēru ievades iekšpusē, kas pazūd, ievadot tekstu. Mēs šodien mēģināsim uzrakstīt viettura CSS stilu.
Uzdevums: izveidojiet savu CSS stilu vietturim
Pieņemsim, ka mums ir stilīga vietne, kuras ievadē tiek izmantots vietturis. Ir jāpanāk, lai viettura pelēkais, garlaicīgais teksta stils atbilstu vietnes vispārējam stilam. Kā to var panākt? Uzreiz teikšu, ka tas vēl nedarbojas visās pārlūkprogrammās. Konkrētāk, tas nedarbojas vispār IE versijās 9 un jaunākās versijās 10 un vēlāk tas joprojām darbojas ar lielām grūtībām. Firefox un tīmekļa komplektu pārlūkprogrammas ir cits jautājums.
Risinājums: css stils vietturim
Tātad, mēs esam izvirzījuši uzdevumu, kā mēs to atrisināsim?
Vispirms izveidosim testēšanas laukumu:
Gatavs, tagad apskatīsim, ko varam darīt ar stilu: Webkit un mozilla ir savi modifikatori, kas ļauj vietturim piešķirt īpašu stilu: ::-webkit-input-placeholder un:-moz-placeholder. Apskatīsim, kā tos izmantot:
Aprakstīsim pašas ievades stilu un tajā esošo tekstu (piemērā zilā krāsa kontrastam):
Ievade (platums: 250 pikseļi; krāsa: zila; fonta svars: normāls; fonta stils: normāls; )
Tagad rakstīsim īpašu stilu viettura tekstam šajā ievadē Webkit pārlūkprogrammām (Chrome, Safari, Opera):
Ievade::-webkit-input-placeholder( krāsa: sarkana; fonta stils: slīpraksts; fonta svars: treknraksts; )
Viettura tekstu padarīsim sarkanu, treknrakstu slīprakstā. Ņemiet vērā, ka atšķirībā no citām CSS pseidoklasēm, kuras ir atdalītas ar vienu kolu, viettura stils tīmekļa komplektā ir atdalīts ar dubultu kolu.
Tagad rakstīsim tieši tādu pašu stilu Mozilla Firefox pārlūkprogrammas:
Ievade:-moz-placeholder( krāsa: sarkana; fonta stils: slīpraksts; fonta svars: treknraksts; )
Gatavs. CSS stils vietturim, protams, varat rakstīt jebkuru, kas ir piemērotāks jūsu dizainam. Darba demonstrāciju var apskatīt vietnē
Viettura atribūts tiek izmantots aicinājumiem uz darbību tukšos ievades un teksta apgabala elementos. Šajā rakstā apskatīsim viettura teksta veidošanas iespējas, kā arī dažus trikus, kas to padarīs ērtāku un funkcionālāku.
Tātad, sāksim ar piemēru tiem, kas nezina, kas ir vietturis.
html
Viettura stilu var mainīt, izmantojot šādu css noteikumu kopu:
css
::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (color:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (color:#c0392b;)Tas izskatās biedējoši, vai ne? Fakts ir tāds, ka tas joprojām nav iekļauts standartos. Katra pārlūkprogramma savā veidā atbalsta vietturu stilu.
IE un vecākos Firefox (pirms 18) vietturis tiek uzskatīts par pseidoklasi, bet jaunajā Firefox, webkit un blink tas tiek uzskatīts par pseidoelementu.
Apskatīsim, kas notika:
Jāsaka, ka netiek atbalstīti visi iespējamie CSS rekvizīti. Vairākums modernās pārlūkprogrammasļauj mainīt:
- fonts (un saistītie rekvizīti)
- fons (un saistītie rekvizīti)
- krāsa
- vārdu atstarpes
- burtu atstarpes
- teksta dekorēšana
- vertikāli izlīdzināt
- teksta pārveidošana
- līnijas augstums
- teksta atkāpe
- teksta pārpilde
- necaurredzamība
Ko darīt, ja vietturis neder?
Dažreiz teksta ievades lauki tiek samazināti platumā izkārtojuma funkciju dēļ, jo īpaši uz mobilajām ierīcēm. Šajā gadījumā viettura garais teksts tiks nogriezts neizskatīgi. Lai to novērstu, varat izmantot teksta pārplūdi: elipsi. Šī sintakse darbosies visās jaunajās pārlūkprogrammās.
css
ievade (text-overflow:ellipsis;) input::-moz-placeholder (text-overflow:ellipsis;) input:-moz-placeholder (text-overflow:ellipsis;) input:-ms-input-placeholder (text-overflow) :elipse;)Kā fokusā paslēpt vietturi?
Viettura slēpšana notiek dažādos veidos.
- dažās pārlūkprogrammās, saņemot fokusu pēc ievades
- citās pārlūkprogrammās, ja ir ievadīta vismaz viena rakstzīme
Man labāk patīk pirmais variants. Lai iestatītu šo darbību visās pārlūkprogrammās, kas atbalsta vietturi, mēs definēsim šādus CSS noteikumus:
css
:focus::-webkit-input-placeholder (krāsa: caurspīdīga) :focus::-moz-placeholder (krāsa: caurspīdīga) :focus:-moz-placeholder (krāsa: caurspīdīga) :focus:-ms-input-placeholder ( krāsa: caurspīdīga)Skaisti paslēpj vietturi
Varat arī pievienot pāreju, lai rādītu un paslēptu vietturi:
css
/* vienmērīga viettura caurspīdīguma maiņa, kad fokuss 0,3 s vieglums;).input1:-moz-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;).input1:-ms-input-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;).input1 : fokuss::-webkit-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;).input1:focus::-moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;).input1:focus : -moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;) .input1:focus:-ms-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;) /* pārvietot vietturi pa labi, kad fokuss*/ .input2::-webkit-input-placeholder (text-indent: 0px; pāreja: teksta atkāpe: 0,3 s vieglums;) .input2::-moz-placeholder (text-indent: 0px; pāreja: teksta atkāpe 0,3 s vieglums;) .input2:-moz-placeholder (text-indent: 0px; pāreja: text-indent 0,3s easy;).input2:-ms-input-placeholder (text-indent: 0px); pāreja: teksta atkāpe 0,3 s viegla;).input2:focus::-webkit-input-placeholder (text-indent: 500 px; pāreja: teksta atkāpe 0,3 s vieglums;).input2:focus::-moz-placeholder ( teksta atkāpe: 500 pikseļi; pāreja: teksta atkāpe — 0,3 s vieglums;).input2:focus:-moz-placeholder (text-indent: 500 px; pāreja: teksta atkāpe — 0,3 s vieglums;).input2:focus:-ms- input-placeholder (teksta atkāpe: 500 pikseļi; pāreja: teksta atkāpe: 0,3 s vieglums;) /* pārvietot vietturi uz leju, kad tas ir fokusēts */ .input3::-webkit-input-placeholder (rindas augstums: 20 pikseļi; pāreja: līnija -height 0,5s easy;).input3::-moz-placeholder (line-height: 20px; pāreja: line-height 0,5s easy;).input3:-moz-placeholder (line-height: 20px; pāreja: līnija- augstums 0,5 s vieglums;).input3:-ms-input-placeholder (rindas augstums: 20 pikseļi; pāreja: līnijas augstums — 0,5 s vieglums;).input3:focus::-webkit-input-placeholder (rindas augstums: 100 pikseļi ; pāreja: līnijas augstums 0,5 s vieglums;).input3:focus::-moz-placeholder (line-height: 100px; pāreja: line-height 0,5s vieglums;).input3:focus:-moz-placeholder (rinda - augstums: 100 pikseļi; pāreja: līnijas augstums 0,5 s vieglums;) .input3:focus:-ms-input-placeholder (līnijas augstums: 100 pikseļi; pāreja: līnijas augstums — 0,5 s vieglums;)Es ceru, ka jums tas noderēs. Rakstiet komentārus un ieteikumus komentāros.
Vietturis ir pseidoklase vai pseidoelements, kas ir atbildīgs par lauka nosaukuma parādīšanu. Tā pamatā ir atzīme (vienkāršības labad sauksim to tā), kurā ievadāt vārdu, un lietotājs to redz iekšā. Katram formas laukam sava veida mājiens vai nosaukums.
Katra pārlūkprogramma apstrādā šo tagu atšķirīgi, un tā stils atstāj daudz vēlamo. Lai mainītu noklusējuma stilus, vienkārši pievienojiet pāris koda rindiņas stilu failam. Nav nekā sarežģīta.
Tomēr ir jāņem vērā, ka ne visu mēs varam mainīt.
No dažādiem stiliem šajā gadījumā mums ir pieejamas šādas lietas:
- font-weight — teksta svara iestatīšana
- fonta lielums — izvēlieties teksta lielumu
- font-family - fontu izvēle
- fons - fons un fona attēls
- krāsa — teksta krāsa
- vārdu atstarpes — iestatiet atstarpi starp vārdiem
- burtu atstarpes — iestatiet atstarpi starp burtiem
- text-decoration — vārdu dekorācijas izvēle. Pasvītrots, izsvītrots utt.
- vertical-align — iestatīt vertikālo izlīdzināšanu
- text-transform - teksta maiņas izvēle. Viss ar lielajiem vai mazajiem burtiem utt.
- line-height — atstarpes starp rindām
- text-indent — iestata kreiso atkāpi rindkopas pirmajai rindai
- teksta pārpilde — izvēle parādīt tekstu, kas neietilpst blokā (paslēpt vai apgriezt un pievienot elipsi)
- necaurredzamība — atlasiet elementa caurspīdīgumu
Tagad, kad esam sapratuši pieejamos stilus, varam sākt veidot, lai to izdarītu, pievienosim šādus stilus:
::-webkit-input-placeholder ( krāsa: #2cb04d; )
::-moz-placeholder ( krāsa: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( krāsa: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder ( krāsa: #2cb04d; )
Pēc šo rindu pievienošanas veidlapas laukos esošo nosaukumu krāsa mainīsies, un tā būs vienāda katrā pārlūkprogrammā. Šeit varat pievienot papildu stilus.
Piemēram, šis stils
::-webkit-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
::-moz-placeholder (color:#2cb04d; font-size:1.5em; font-weight:600;) /*Firefox 19+*/
:-moz-placeholder (color:#2cb04d; font-size:1.5em; font-weight:600;) /*Firefox 18-*/
:-ms-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
Pievienojiet krāsu liela izmēra un vidējais teksta svars. Ja pievienojat papildu īpašumu -
text-overflow:ellipsis, tad teksts tiks apgriezts, lai tas atbilstu laukam, un beigās tiks pievienota elipsi.
Ir vēl viens interesants īpašums: pateicoties animācijas parādīšanai css (stilos), jūs varat konfigurēt skaistu slēpšanu, novietojot kursoru laukā. Iepriekš tas tika darīts, izmantojot js (skriptus)
Ievade::-webkit-input-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input::-moz-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input:-moz-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input:-ms-input-placeholder (necaurredzamība: 1; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus::-webkit-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus::-moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus:-moz-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
.input:focus:-ms-input-placeholder (necaurredzamība: 0; pāreja: necaurredzamība 0,3 s vieglums;)
Šādu stilu pievienošana ļaus vietturim vienmērīgi izbalināt, kad kursors tiek novietots laukā
.input ir formas elementu klase. Lai stili darbotos, veidlapas lauka kodam vajadzētu izskatīties šādi:
Vai arī varat izmantot elementu klasi. Tādā veidā katrai veidlapai varat iestatīt dažādus stilus.
.contacts-form form input::-webkit-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
.contacts-form formas ievade::-moz-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)/*Firefox 19+*/
.contacts-form formas ievade:-moz-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)/*Firefox 18-*/
.contacts-form formas ievade:-ms-input-placeholder (krāsa: #2cb04d; fonta izmērs: 1,5 em; fonta svars: 600;)
Šajos vienkāršajos veidos jūs varat izveidot patiešām skaistu formas dizainu.