Vietturi, tie bieži pelēkoti teksta elementi ievadē, var radīt grūtības. Par laimi, mēs esam ieguvuši īsu, bet efektīvu CSS risinājumu, lai veidotu ievades viettura tekstu jebkurā vēlamajā krāsā un necaurredzamībā. Lasiet tālāk, lai uzzinātu kodu.

Viettura teksta krāsas maiņa

Sāksim ar vienkāršu ievadi un kādu viettura tekstu. Šajā piemērā mēs izmantosim vārdu "meklēt", bet jūs varat izmantot visu, ko vēlaties. Pamata HTML ir zemāk:

HTML

Ievades (un teksta apgabala) viettura tekstam pēc noklusējuma ir gaiši pelēka krāsa, taču mēs to varam mainīt, izmantojot dažas CSS rindiņas. Šeit mēs iekrāsosim ievades tekstu sarkanā krāsā, izmantojot HTML krāsas nosaukumu, taču pietiks ar jebkuru krāsu metodi (HEX, RGB, HSL).

CSS

::-webkit-input-placeholder ( /* Chrome */ krāsa: sarkana; ) :-ms-input-placeholder ( /* IE 10+ */ krāsa: sarkana; ) ::-moz-placeholder ( /* Firefox 19 + */ krāsa: sarkana; necaurredzamība: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ krāsa: sarkana; necaurredzamība: 1; )

Ņemiet vērā, ka ir svarīgi iekļaut dažādus piegādātāju prefiksus, lai atbalstītu pēc iespējas vairāk pārlūkprogrammu. Tikai Firefox ievades viettura teksts pēc noklusējuma ir nedaudz caurspīdīgs, tāpēc nav nepieciešams iestatīt necaurredzamības rekvizītu pārlūkprogrammā IE vai Chrome.

Viettura fokusa teksta krāsas maiņa

Labi, mēs esam veiksmīgi nomainījuši viettura teksta krāsu uz sarkanu, taču būtu jauki, ja kaut kas notiktu, kad lietotājs noklikšķina mūsu ievadē. Izmantojot tos pašus piegādātāja prefiksa CSS rekvizītus, mēs varam mainīt ievades viettura teksta necaurredzamību. fokusā.

CSS

ievade ( kontūra: nav; polsterējums: 12 pikseļi; apmales rādiuss: 3 pikseļi; apmale: 1 pikseļi, vienkrāsains melns; ) ::-webkit-input-placeholder ( /* Chrome */ krāsa: sarkana; pāreja: necaurredzamība 250 ms atvieglota ievadīšana un izvadīšana ; ) :focus::-webkit-input-placeholder ( necaurredzamība: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ krāsa: sarkana; pāreja: necaurredzamība 250 ms easy-in-out; ) :focus :-ms-input-placeholder ( necaurredzamība: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ krāsa: sarkana; necaurredzamība: 1; pāreja: necaurredzamība 250 ms, viegla ieeja-out; ) :focus:: -moz-placeholder ( necaurredzamība: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ krāsa: sarkana; necaurredzamība: 1; pāreja: necaurredzamība 250 ms easy-in-out; ) :focus:-moz-placeholder (necaurredzamība: 0,5;)

Iepriekš minētajā piemērā mēs esam iekļāvuši dažus pamata stilus pašai ievadei un pievienojuši necaurredzamības pāreju, lai padarītu pieredzi tikai nedaudz jaukāku. Apskatiet demonstrāciju un eksperimentējiet ar citiem CSS rekvizītiem un pārejām.

Vietturis ir ievades lauka elements, kurā var ievietot rīka padomu. Kad lietotājs sāk ievadīt datus, atbalsta teksts pazūd, lai netraucētu. Katrai pārlūkprogrammai ir savs viedoklis par to, kā šis elements ir jāparāda, un dažreiz noklusējuma stili sabojā visu dizainu. Lai tos pārvaldītu, ir jāizmanto īpašs CSS viettura noteikums.

Kur ir vietturis?

Problēma ir tā, ka ievades lauka rīka padoms ir stingri paslēpts ēnu DOM, un tam nav tik viegli piekļūt. Šim nolūkam tiek izmantots īpašs nestandarta ::placeholder. Ar tās palīdzību jūs varat pārvaldīt rīka padoma rekvizītus.

Viettura stils CSS formātā izskatās šādi:

Ievade:: vietturis ( krāsa: sarkana; necaurredzamība: 1; fonta stils: slīpraksts; )

Pārlūka atbalsts

CSS viettura pseidoelementu labi apstrādā visas mūsdienu pārlūkprogrammas, un, lai atbalstītu vecākas pārlūkprogrammas, varat izmantot šādus prefiksus:

• ::-webkit-input-placeholder - tīmekļa komplektu pārlūkprogrammām (Safari, Chrome, Opera);
• ::-moz-placeholder — Firefox pārlūkprogrammām, kas vecākas par 19. versiju;
• :-moz-placeholder — vecākam Firefox;
• :-ms-input-placeholder - for Internet Explorer virs versija 10.

Kā redzat, vecs Mozilla pārlūkprogrammas, kā arī IE uzskata, ka vietturis ir CSS pseidoklasi, nevis pseidoelementu. Nestrīdēsimies ar viņiem, mēs vienkārši ņemsim vērā šo aspektu, veidojot ievades lauku.

Stila iespējas

Viettura pseidoelementam CSS var iestatīt šādas opcijas:

• fons — rīka padomu bloku grupa attiecas uz visu ievades lauku. Var iestatīt ne tikai krāsu (fona krāsa), bet arī attēlu (fona attēls).
• teksta krāsa - krāsa;
• caurspīdīgums - necaurredzamība;
• pasvītrošana, pārvilkšana vai izsvītrošana - teksta dekorēšana;
• case - text-transform;
• iekšējie ievilkumi - polsterējums. Neatbalsta visas pārlūkprogrammas. Tāpat kā ar iekļautajiem elementiem, augšējais un apakšējais polsterējums tiek ignorēts.
• fontu displejs - fontu grupas īpašības, rindas augstums un dažādas atkāpes (teksta atkāpe, burtu atstarpes, vārdu atstarpes);
• vertikālā izlīdzināšana līnijā - vertikālā izlīdzināšana;
• teksta apgriešana, kad konteiners pārplūst — teksta pārpilde.

.input1::placeholder ( fona attēls: lineārs gradients (laima, zils); krāsa: balta; ) .input2::placeholder ( teksta noformējums: cauri līnija; krāsa: violeta; fonta svars: trekns; ) . input3::placeholder ( fonta izmērs: 16 pikseļi; atstarpes starp burtiem: 10 pikseļi; ) .input4::placeholder ( fons: brūns; krāsa: balta; teksta pārpilde: elipsis; )

Fokusā

Pēc noklusējuma rīka padoms pazūd no ievades lauka tikai tad, ja tajā ir ievadīta vismaz viena rakstzīme. Bet vietturis ļauj nekavējoties īstenot pazušanu, koncentrējoties uz lauku. Lai to izdarītu, jums tas jāapvieno ar pseidoklase: fokuss.

Ievade:focus::placeholder ( krāsa: caurspīdīga; )

Dažās pārlūkprogrammās ir iespējams animēt izmaiņas vairākos viettura rekvizītos, izmantojot pārejas paziņojumu.

Ievade::placeholder ( krāsa: melna; pāreja: krāsa 1s; ) input:focus::placeholder ( krāsa: balta; )

IN Google pārlūkprogramma Chrome rīka padoma krāsa, fokusējoties uz šādu lauku, vienmērīgi mainīsies vienas sekundes laikā.

Viettura atribūts tiek izmantots, lai izveidotu rīka padomus tukšos ievades laukos (tagos Un ). Šajā rakstā es apskatīšu veidus, kā veidot vietturus, kā arī tos padarīt lietotājam draudzīgākus.</p> <p>Sāksim ar piemēru tiem, kuri vēl nezina, kas ir vietturis un kā to lietot:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>Izstrādājot saskarnes, jāņem vērā vietturu uzvedība. Viettura teksts pazūd, tiklīdz sākas rakstīšana. Tāpēc nevajadzētu tos izmantot, lai pārsūtītu informāciju par pašu ievades lauku (cik un kādām rakstzīmēm tajā vajadzētu būt). Šiem nolūkiem vislabāk ir izmantot tagu <label>vai rindkopa ar nelielu mājienu. Varat lasīt vairāk par vietturu izmantošanas funkcijām.</p> <h2>Stilizācija</h2> <p>Vietturu stila veidošanai tiek izmantoti šādi noteikumi:</p>::-webkit-input-placeholder ( krāsa : zila ; ) ::-moz-placeholder ( krāsa : zila ; ) /* Firefox 19+ */ :-moz-placeholder ( krāsa : zila ; ) /* Firefox 18- * / :-ms-input-placeholder ( krāsa : zila ; ) <p>Izskatās šausmīgi, vai ne? Un tam ir iemesls - līdz šim vietturu CSS noteikumi nav standartizēti, un ieviešana katrā pārlūkprogrammā ir atšķirīga. Plašāku informāciju par visiem nepieciešamajiem prefiksiem var atrast vietnē caniuse.</p> <p>Ja izmantojat CSS priekšapstrādātāju, visticamāk, visērtāk būs rakstīt vienkāršu kombināciju, lai piemērotu stilus vietturiem. Piemērs valodā Sass:</p>@mixin vietturis ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @saturs ; ) ) <p>Atkarībā no konteksta kombināciju var izmantot, lai piemērotu stilus vai nu globāli, vai uz atsevišķiem elementiem (izmēģiniet to vietnē SassMeister):</p> <span>// Globāli katram ievades laukam</span>@include vietturis ( krāsa : zila ;) <span>// Konkrētiem ievades laukiem</span>.input ( @include vietturis ( krāsa : zaļa ; ) ) <h4>Piemērs</h4> <p>Zils teksts vietturam (nekad to nedariet):</p>.blue-text ::-webkit-input-placeholder ( krāsa : #2e8ece ; ) .blue-text :-moz-placeholder ( krāsa : #2e8ece ; ) .blue-text ::-moz-placeholder ( krāsa : #2e8ece ; ) .blue-text :-ms-input-placeholder ( krāsa : #2e8ece ; ) <p> <input type="text" placeholder="Sāciet rakstīt šeit" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Atbalstītie rekvizīti</h2> <p>Ne katrs <a href="https://whatsappss.ru/lv/security/kontent-zanimaet-70-shiriny-stranicy-parametry-css-width-i-height-dlya.html">CSS īpašums</a> var izmantot ar vietturiem. Šeit <a href="https://whatsappss.ru/lv/multimedia/polnyi-spisok-stop-slov-dlya-instagram-stop-slova-skachaite-odin-iz-samyh-moshchnyh.html">pilns saraksts</a> atbalstītie rekvizīti:</p> <ul><li>fonts un visi saistītie rekvizīti (fonta lielums, fontu saime utt.)</li> <li>fons un visas saistītās īpašības (fona krāsa, fona attēls utt.)</li> <li>necaurredzamība</li> <li>teksta atkāpe</li> <li>teksta pārpilde</li> <li>krāsa</li> <li>teksta pārveidošana</li> <li>līnijas augstums</li> <li>vārdu atstarpes</li> <li>burtu atstarpes</li> <li>teksta dekorēšana</li> <li>vertikāli izlīdzināt</li> </ul><h2>Animācijas</h2> <p>Animācijas idejas pieder emuāram html5.by.</p> <p>Visi tālāk minētie piemēri ir rakstīti, izmantojot Sass priekšapstrādātāju. Katrai no tām ir saite uz SassMeister, kur var atrast apkopoto CSS kodu.</p> <p>Visticamāk, ja ievades laukā ir fokuss, vietturiem vēlēsities lietot animācijas. Tas viss tiek darīts pavisam vienkārši. Pietiek tikai dažas reizes izmantot iepriekš uzrakstīto vietturu miksu:</p>.input ( @include vietturis ( <span>// Normāla stāvokļa stili</span>) & :focus ( @include vietturis ( <span>// Stili pēc fokusa notikuma</span> } } } <h3>Mainiet caurspīdīgumu</h3>.input ( @include vietturis ( krāsa : # aaa ; necaurredzamība : 1 ; pāreja : necaurredzamība 300 ms ; ) & :focus ( @include vietturis ( necaurredzamība : 0 ; ) )) <p> <input type="text" placeholder="Demonstrācija: caurspīdīguma maiņa" class="demo-css-placeholders-input pl-opacity"></p> <h3>Pārslēdziet pa labi un pa kreisi</h3> <p>Jo plašāks ir ievades lauks, jo lielākai jābūt teksta atkāpes rekvizīta vērtībai. Standarta ievades laukam pietiks ar 500 pikseļiem, plašākiem laukiem tas jāizvēlas manuāli. Animācijas ātrums ir atkarīgs no ievades lauka platuma un teksta atkāpes vērtības. Lai pārslēgtos pa kreisi, ir jāizmanto negatīvas vērtības, piemēram, -500 pikseļi .</p><p> <input type="text" placeholder="Demonstrācija: pārslēgt pa labi" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demonstrācija: pārbīdīt pa kreisi" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Pārslēdziet uz leju</h3> <p>Tāpat kā iepriekšējā piemērā, animācija ir atkarīga no ievades lieluma, taču šajā gadījumā pievērsiet uzmanību augstumam. Lielākajai daļai ievades lauku vajadzīgā rindas augstuma vērtība būs 100 pikseļu robežās. Diemžēl line-height rekvizītu nevar izmantot, lai radītu augšupejošas nobīdes efektu, jo rekvizīts nepieņem negatīvas vērtības.</p>.input ( @include vietturis ( teksta atkāpe : 0px ; pāreja : teksta atkāpe 300 ms ; ) & :focus ( @include vietturis ( teksta atkāpe : 500 pikseļi ; ) ) ) <p> <input type="text" placeholder="Demonstrācija: pārslēdziet uz leju" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Kopā</h3> <p>Lai vietturu animācijas koda izmantošana būtu patīkama un ērta, jebkuram priekšapstrādātājam varat uzrakstīt nelielu mixīnu bibliotēku. Bibliotēka izskatās šādi ():</p>@mixin vietturis ( & : :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) ( @include placeholder ( text-indent : 0 ; pāreja : text-indent $duration ; ) & :focus ( @include vietturis ( text-indent : if ($side == left , - $position , $position ); ) ) ) @mixin pl-slide-down ($position : 5 , $duration : 200ms ) ( @include vietturis ( line-height : 1 ; pāreja : līnijas augstums $ilgums ; ) & :focus ( @include placeholder ( line-height : $position ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include vietturis (necaurredzamība : 1) ; pāreja : necaurredzamība $ilgums ; ) & :focus ( @include vietturis ( necaurredzamība : 0 ; ) ) ) <p>Tas ir ļoti vienkārši lietojams. Pietiek, lai pievienotu vēlamo mixin jebkuram ievades laukam vai vienkārši izveidotu vienu globālu noteikumu visiem lapas tempa turētājiem:</p> <span>// Atsevišķiem elementiem</span>.pl-shift-right ( @include pl-shift ( pa labi ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// Par visu pārējo</span>@include pl-shift (pa kreisi); <h2>Autoprefiksators</h2> <p>Ja neizmantojat priekšapstrādātāju un joprojām nevēlaties, lai jūsu CSS avota fails pārvērstos par prefiksu haosu, ko visi redzētu <a href="https://whatsappss.ru/lv/tools/medlenno-gruzit-stranicy-dolgo-gruzyatsya-stranicy-v-brauzere-vse.html">iespējamās pārlūkprogrammas</a>, tad pievērsiet uzmanību Autoprefixer. Ar viņa palīdzību <a href="https://whatsappss.ru/lv/what-to-do/kakoi-atribut-tega-font-pozvolyaet-ustanovit-cvet-tegi-font-face-size.html">tīrs CSS</a> var padarīt netīru (bet citā failā), visiem rekvizītiem pievienojot visus nepieciešamos prefiksus. Lai spraudnis darbotos ar vietturiem, vienkārši izmantojiet pseidoelementu::placeholder:</p>::placeholder ( krāsa : oranža ; ) . ievade::placeholder(krāsa:zila;) <p>Pēc stilu parsēšanas Autoprefixer izveidos atsevišķu CSS failu, kurā tas ierakstīs visus nepieciešamos prefiksus visām jūsu norādītajām pārlūkprogrammām.</p> <h2>Ko tālāk</h2> <p>Kā jau rakstīju iepriekš, viss, kas saistīts ar stilu piemērošanu vietturiem, vēl nav standartizēts. Tas drīzumā tiks novērsts. Selector Level 4 specifikācija pievienoja pseidoklasi: placeholder-shown , kas beidzot standartizēs pašlaik pastāvošo neprātīgo pseidoklasešu un pseidoelementu sajaukumu. Varat pārraudzīt caniuse atbalstu (šobrīd tas netiek atbalstīts nevienā pārlūkprogrammā).</p> <p>Stilu lietošana ar :placeholder-shown būs daudz vienkāršāka:</p>.input :placeholder-showd ( krāsa : zila ; ) <p>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.</p> <h2>Uzdevums: izveidojiet savu CSS stilu vietturim</h2> <p>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 vispār nedarbojas IE versijās 9 un jaunākās versijās; 10 un jaunākās versijās tas joprojām darbojas ar lielām grūtībām. Firefox un tīmekļa komplektu pārlūkprogrammas ir cits jautājums.</p> <h2>Risinājums: css stils vietturim</h2> <p>Tātad, mēs esam izvirzījuši uzdevumu, kā mēs to atrisināsim?</p> <p>Vispirms izveidosim testēšanas laukumu:</p><p> <input type="text" name="input" placeholder="Mūsu viettura teksts" value="" /> </p><p>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:</p> <p>Aprakstīsim pašas ievades stilu un tajā esošo tekstu (piemērā zilā krāsa kontrastam):</p><p>Ievade (platums: 250 pikseļi; krāsa: zila; fonta svars: normāls; fonta stils: normāls; )</p><p>Tagad rakstīsim īpašu viettura teksta stilu šajā ievadē Webkit pārlūkprogrammām (Chrome, Safari, Opera):</p><p>Ievade::-webkit-input-placeholder( krāsa: sarkana; fonta stils: slīpraksts; fonta svars: treknraksts; )</p><p>Padarīsim viettura tekstu sarkanu <a href="https://whatsappss.ru/lv/browser/pervye-tri-vypadayushchih-spiska-v-verhnem-ryadu-prednaznacheny-dlya.html">trekns slīpraksts</a>. Ņ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.</p> <p>Tagad rakstīsim tieši tādu pašu stilu <a href="https://whatsappss.ru/lv/browser/kak-sdelat-stranicu-startovoi-v-mozile-ustanovka-nachalnoi-stranicy-v.html">Mozilla Firefox</a> pārlūkprogrammas:</p><p>Ievade:-moz-placeholder( krāsa: sarkana; fonta stils: slīpraksts; fonta svars: treknraksts; )</p><p>Gatavs. CSS stils vietturim, protams, varat rakstīt jebkuru, kas ir piemērotāks jūsu dizainam. Darba demonstrāciju var apskatīt vietnē</p> <p>Ja neesat pazīstams ar viettura atribūtu, tad nedaudz paskaidrosim, kas tas ir un kur tas tiek izmantots. To izmanto veidlapas ievades laukos. Atribūts ievades laukā parāda tekstu, kas atspoguļo noteikta mājiena lomu. Iepriekš mūsu vietnē bija javascript izmantošanas piemērs, pozitīvā puse <a href="https://whatsappss.ru/lv/browser/rekvizity-formy-1s-8-3-rekvizity-upravlyaemoi-formy-1cv8-metody-dlya.html">šī metode</a> Tas ir saderīgs ar vairākām pārlūkprogrammām. Tagad parunāsim par viettura atribūta stilu, kas tiek izmantots ievades un teksta apgabala elementos. <br>Ievades lauka kods mūsu piemērā izskatīsies apmēram šādi:</p><p> <input type="text" placeholder="Ievadiet savu vārdu"> </p><p>Izvadā mēs iegūstam šādu lauku: <input type="text" placeholder="Ievadiet savu vārdu"></p> <p>Tagad iedomāsimies, ka mums ir jāveido vietturis, tāpēc mums CSS ir jāraksta noteikumu kopa:</p><p>::-webkit-input-placeholder ( krāsa: #c1c1c1; ) ::-moz-placeholder ( krāsa: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( krāsa: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( krāsa: #c1c1c1; )</p><p>Mēs iegūstam: <input class="plc" type="text" placeholder="Ievadiet savu vārdu"></p> <p>Mēs nevaram mainīt visus rekvizītus, taču tālāk ir sniegts saraksts ar lielāko daļu no tiem, ko atbalsta mūsdienu pārlūkprogrammas: <br><b>fontu</b>(arī saistītie īpašumi) <br><b>fons</b>(arī saistītie īpašumi) <br><b>krāsa</b><br><b>vārdu atstarpes</b><br><b>burtu atstarpes</b><br><b>teksta dekorēšana</b><br><b>vertikāli izlīdzināt</b><br><b>teksta pārveidošana</b><br><b>līnijas augstums</b><br><b>teksta atkāpe</b><br><b>teksta pārpilde</b><br><b>necaurredzamība</b></p> <p>IN <a href="https://whatsappss.ru/lv/administrator/gde-naiti-sohranennyi-fail-dokumenty-hranyashchiesya-v-seti-ili-na.html">dažādas pārlūkprogrammas</a> noteikums ir rakstīts savādāk, jo Lai gan nav vienota standarta, šis ierakstu kopums joprojām ir aktuāls. IE pārlūkprogrammā, kā arī Firefox, kas jaunāka par 18. versiju, vietturis tiek uztverts kā pseidoklase, un jaunākās <a href="https://whatsappss.ru/lv/tips/luchshie-programmy-dlya-android-samye-nuzhnye-prilozheniya-dlya-android.html">Firefox pārlūkprogrammas</a>, Webkit un blink tiek uzskatīti par pseidoelementiem.</p><p><b>Teksta saīsināšana vietturā</b><br>Dažreiz rīka padomi var būt tik gari, ka nevar pilnībā iekļauties ievades laukā. Šiem nolūkiem varat izmantot arī papildu rekvizītus, kas ļaus saīsināt viettura tekstu ievades laukā.</p><p>Ievade ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :elipse;)</p><p>Rezultātā mēs iegūstam ievades lauku ar vietturi, piemēram: <input class="plc2" type="text" placeholder="Ievadiet savu vārdu"></p><p><b>Slēpt tekstu, noklikšķinot uz lauka</b><br>Pēc noklusējuma katra pārlūkprogramma viettura atbildi interpretē atšķirīgi. Dažās pārlūkprogrammās tas tiek paslēpts uzreiz, noklikšķinot uz lauka, citās tas tiek paslēpts, ja ievades laukā ir vismaz viena rakstzīme. Panāksim, ka teksts pazūd, noklikšķinot uz lauka, vienādi visās pārlūkprogrammās.</p><p>: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 -vietturis (krāsa: caurspīdīga;)</p><p>Mēs saņemam šo darbību:</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> </section> <section id="sidebar" class="secondary clearfix" role="complementary"> <aside id="nav_menu-3" class="widget widget_nav_menu clearfix"> <h3 class="widgettitle"><span>Kategorijas</span></h3> <div class="menu-menyu1-container"> <ul id="menu-menyu1" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/lv/category/security/">Drošība</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/lv/category/multimedia/">Multivide</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/lv/category/office-programs/">Biroja programmas</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/lv/category/utilities/">Komunālie pakalpojumi</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/lv/category/administrator/">Administrators</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/lv/category/programming/">Programmēšana</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/lv/category/browser/">Pārlūkprogramma</a></li> </ul> </div> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widgettitle"><span>Jaunākie ieraksti</span></h3> <ul> <li> <a href="https://whatsappss.ru/lv/office-programs/kak-nastroit-osnovnoi-shlyuz-na-windows-7-shlyuz-ustanovlennyi-po.html">Noklusējuma vārteja nav pieejama — kas man jādara?</a> </li> <li> <a href="https://whatsappss.ru/lv/utilities/ldzhi-leon-n-324-telefon-lg-leon-harakteristiki-otzyvy-vremya-avtonomnoi.html">LG Leon tālrunis: īpašības, atsauksmes</a> </li> <li> <a href="https://whatsappss.ru/lv/programming/kak-zanesti-nomer-v-chernyi-spisok-na-chernyi-spisok-ot.html">Melnais saraksts no Megafon</a> </li> <li> <a href="https://whatsappss.ru/lv/office-programs/chasy-s-povorotom-naruchnye-chasy-s-vrashchayushchimsya-bezelem-originalnye-naruchnye.html">Rokas pulkstenis ar rotējošu rāmi</a> </li> <li> <a href="https://whatsappss.ru/lv/utilities/naruchnye-chasy-s-vrashchayushchimsya-bezelem-katalog-podvesnyh.html">Uz piekares (kronšteina) piekaramo divpusējo pulksteņu katalogs Kei Kei Pulksteņi</a> </li> <li> <a href="https://whatsappss.ru/lv/office-programs/naushniki-bluetooth-mini-503-nakladnye-besprovodnye-nedavno-reshila-chto.html">Nesen nolēmu, ka man vajag austiņas sportam.</a> </li> <li> <a href="https://whatsappss.ru/lv/administrator/smartfony-s-zakruglennymi-krayami-displeya-telefony-samsung-s-izognutym.html">Samsung tālruņi ar izliektu ekrānu: modeļu apskats, plusi un mīnusi</a> </li> <li> <a href="https://whatsappss.ru/lv/what-is-it/htc-wildfire-s-tehnicheskie-harakteristiki-htc-wildfire-s-harakteristiki-otzyvy.html">HTC Wildfire S: raksturojums, atsauksmes</a> </li> <li> <a href="https://whatsappss.ru/lv/browser/vse-chto-nuzhno-znat-o-novyh-smartfonah-google-pixel-vse-chto-nuzhno.html">Viss, kas jums jāzina par jauniem viedtālruņiem</a> </li> <li> <a href="https://whatsappss.ru/lv/security/thumbnails-na-androide-kak-ochistit-pamyat-thumbnails-na-androide-problema.html">sīktēli operētājsistēmā Android. Kā notīrīt atmiņu.sīktēli operētājsistēmā Android Problēma: Android Pay maksājumu sistēma nedarbojas</a> </li> </ul> </aside> <aside id="nav_menu-4" class="widget widget_nav_menu clearfix" style="text-align:center;padding:0px;"> </aside> </section> </div> <div id="footer-wrap"> <footer id="footer" class="container clearfix" role="contentinfo"> </footer> </div> </div> <center style="font-size:0.8em;"> <a href='https://play.google.com/store/apps/details?id=pdf.reader.converter.jpgtopdf.imagetopdf' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=whatsappss.ru&sub2=pdf.reader.converter.jpgtopdf.imagetopdf&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy><br><a href="https://whatsappss.ru/lv/" title="Bezmaksas programmu un noderīgu padomu pasaule">Bezmaksas programmu un noderīgu padomu pasaule</a> <br>2024 whatsappss.ru <br><br> </center> <center><noindex></noindex></center> <link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 10, "margin_bottom" : 115, "stop_id" : "", "screen_max_width" : 800, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['nav_menu-4'] } ; </script> <script type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script></body> </html>