Iestatiet viettura krāsu. Kā mainīt rīka padoma teksta krāsu vietturā, izmantojot CSS stilus? Skaisti paslēpj vietturi

Sākums / Tehnoloģijas
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