A CSS megváltoztatja a helyőrző színét. A mezők nevének megjelenése vagy a helyőrző megváltoztatása

Az űrlap csökkentése és a vizuális zaj csökkentése érdekében, a tervezők címke Cserélje ki a helyőrző attribútumot, ezáltal növelve a terhelést a rövid távú memóriában. Az emberek károsodott látomással, hogy nehéz olvasni. Jobb hely közvetlenül a beviteli mező felett. Az üres mező könnyebb felismerhető, mint egy kitöltést igénylő elemként.

rossz

oké

Stilizáció: Change Color Playholder CSS

Változtassa meg a bemeneti mező stílusát a CSS helyőrzőjével

rossz

Helyőrző hatás

A helyőrző attribútum csak működik és Még akkor is, ha más címkéket a tartalom megosztott attribútuma határoz meg.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Szöveget írhat be" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Szöveget írhat be" class="raz"></div> <h2>Ősi memória módszer változó érték JavaScript</h2> <input onblur="this.value=(this.value==" Onfocus \u003d."this.value=(this.value==this.title)?" value="Email" title="Email"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="Email" title="Email" /> <p>A helyőrző attribútumot az üres bemeneti mezők (címkék) <input> és <textarea>). Ebben a cikkben figyelembe veszem az elegáns játékosok choleders, valamint hogyan lehet kényelmesebbé tenni őket.</p> <p>Kezdjük azzal a példával, hogy azok, akik még mindig nem tudják, mi a playsholder, és hogyan kell használni:</p> <input type= "email" placeholder= "example@gmail.com." > <p> <input type="email" placeholder="example@gmail.com." class="demo-css-placeholders-input"></p> <p>Az interfészek fejlesztésekor figyelembe kell venni a játszók viselkedésének jellemzőit. A leeresztőholeder szövege eltűnik, amint a bemenet kezdődik. Ezért nem kell használni őket a beviteli mezőre vonatkozó információk továbbítására (hány és milyen karaktereket kell tartalmaznia). E célból a legjobb a címke használata <label> vagy egy kis csúcscal. Tudjon meg többet a lejátszó choleders használatának jellemzőiről.</p> <h2>Stilizáció</h2> <p>A következő szabályokat használják a játékosok choleders stilizálására:</p> :: - Webkit-bemeneti helyőrző (szín: kék, kék;) :: - Moz-helyőrző (szín: kék, kék;) / * Firefox 19+ * /: /: -ms-bemeneti helyőrző (szín: kék;) <p>Szörnyűnek tűnik, igaz? És van egy oka - egészen mostanáig, CSS szabályok játszó tulajdonosok nem egységesek és végrehajtása minden böngésző eltérő. Bővebben az összes szükséges előtagról megtalálható a Caniuse-n.</p> <p>Ha CSS preprocesszort használ, akkor valószínűleg a stílusok felhasználása a filmhordók számára, akkor a legmegfelelőbb az egyszerű keveréshez. Példa a Sass-on:</p> @Mixin helyőrző (&: - webkit-bemeneti helyőrző (@content;) &: - Moz-helyőrző (@content;) &: - Moz-helyőrző (@content;) &: - MS-bemeneti helyőrző (@content ;) <p>A keverés kontextusától függően mind a stílusok, mind az egyes elemek globális alkalmazása (próbálja meg a Sassmeistert):</p> <span>// globálisan minden beviteli mező esetében</span>@Include helyőrző (szín: kék;) <span>// bizonyos bemeneti mezők esetében</span>.input (@Include Placeolder (szín: zöld,))) <h4>Példa</h4> <p>Kék szöveg a PlaySholder-hez (Soha ne tegye meg):</p> .Blue-text :: - Webkit-bemeneti helyőrző (szín: # # 2E8ECE;) .Ble-szöveg: -moz-placeolder (szín: # 2e8ece;) .Blue-szöveg :: - Moz-helyőrző ;) .Blue-Szöveg: -ms-bemeneti helyőrző (szín: # 2e8ece;) <p> <input type="text" placeholder="Indítsa el a gépelést itt" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Támogatott tulajdonságok</h2> <p>Nem minden CSS tulajdonság használható a Playcold segítségével. Itt található a támogatott tulajdonságok teljes listája:</p> <ul><li>betűtípus és minden kapcsolódó tulajdonság (betűméret, betűtípus, stb.)</li> <li>háttér és minden kapcsolódó tulajdonság (háttérszín, háttérkép stb.)</li> <li>átlátszatlanság</li> <li>szövegszöveg</li> <li>szöveg túlcsordulás.</li> <li>szín</li> <li>szövegszerkezet</li> <li>sormagasság</li> <li>szó-távolság</li> <li>betűtávolságok</li> <li>szöveges dekoráció.</li> <li>függőleges</li> </ul><h2>Élénkség</h2> <p>Az animációs ötletek a HTML5.by bloghoz tartoznak.</p> <p>Az alábbi példák az SASS PROPROCESSOR segítségével íródnak. Mindegyikhez csatolva van egy linkhez a Sassmeister-hez, amely megtalálható a Compiled CSS kódot.</p> <p>Valószínűleg az animációkat szeretné alkalmazni a filmhordóknak, amikor a bemeneti mezőre összpontosít. Mindez nagyon egyszerű. Csak néhányszor használják a korábban mixin helyőrző:</p> .input (@Include Placeholder ( <span>// Stílusok normál állapotban</span> ) &: Focus (@Include Placeholder ( <span>// stílusok a fókusz esemény után</span> } } } <h3>Átláthatóság módosítása</h3> .input (szín: # #aaa, opacitás: 1, átmenet: opacitás 300ms;) &: fókusz (@Include Placeholder (Opacity: 0;))) <p> <input type="text" placeholder="DEMO: Átlátszóság módosítása" class="demo-css-placeholders-input pl-opacity"></p> <h3>Váltás jobbra és balra</h3> <p>Minél nagyobb a beviteli mező szélessége, annál nagyobb a szöveg-francia tulajdonság értéke. A standard beviteli mező esetében az 500px elegendő lesz, a szélesebb körben szükség van manuálisan kell felvenni. A beviteli mező szélességétől, és a szövegbefenett érték az animáció sebességétől függ. A váltáshoz negatív értékeket kell használnia, például -500px.</p><p> <input type="text" placeholder="Demo: Váltás jobbra" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: Shift balra" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Eltol</h3> <p>Mint az utolsó példában, az animáció a bemenet akaratának méretétől függ, de ebben az esetben a figyelmet a magasságra fizetik. A túlnyomó többségi bemeneti mezők esetében a kívánt vonali magasság értéke 100px-en belül lesz. Sajnos a vonalmagasságú tulajdonság használatával lehetetlen végrehajtani a váltás hatását, mivel az ingatlan nem fogad el negatív értékeket.</p> .input (szöveges francia bekezdés: 0px; átmenet: szöveges francia bekezdés, 300ms,) &: fókusz (@nclude placeolder (szöveges francia bekezdés: 500px;))) <p> <input type="text" placeholder="Demo: Shift Down" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Együtt</h3> <p>A playcolders animációs kódjának használatához kellemes és kényelmes volt, írhat egy kis keveréket bármilyen előfeldolgozóhoz. A könyvtár így néz ki ():</p> @Mixin placeolder (&: - webkit-bemeneti helyőrző (@content) &: - Moz-helyőrző (@content) &: - Moz-helyőrző (@Content) &: - MS-bemeneti helyőrző (@content)) @ Mixin PL-Shift ($ Side: Bal, $ pozíció: 500px, $ Ideumvotholder) (@Include Plactholder (szöveges francia bekezdés: 0, átmenet: szöveges francia bekezdés;) &: fókusz (@Include Placeholder (szöveges francia bekezdés: Ha ($ side \u003d\u003d bal, - $ pozíció, $ pozíció);)))) @mixin pl-slide-down ($ pozíció: 5, $ Időtartam: 200ms) (@Include Placeholder (vonalmagasság: 1, átmenet: Vonalmagasság $ Időtartam;) &: Fókusz (@Include Placeholder (sormagasság: $ pozíció;))) @mixin pl-fade-out ($ Időtartam: 200ms) (@Include Placeholder (Opacity: 1, átmenet: átmenet $ Időtartam;) &: Focus (@Include Placeolder (Opacity: 0;))))) <p>Nagyon egyszerűen használható. Elég ahhoz, hogy a kívánt keverést bármely mező beviteli mezőhöz csatlakoztatja, vagy egyszerűen hozzon létre egy globális szabályt az összes fizetéshez az oldalon:</p> <span>// az egyes elemek esetében</span>.pl-shift-jobb (@Clude pl-shift (jobbra);) .pl-fade-out (@nclude pl-fade-out;) <span>// a többinek</span>@nclude pl-shift (balra); <h2>Autoprefixer.</h2> <p>Ha nem használja az előfeldolgozót, és még mindig nem szeretné, hogy a forráscsomófájlja az összes lehetséges böngésző előtagjaitól kásare forduljon, akkor figyeljen az AutoPrefixerre. Ezzel a tiszta CSS piszkos (de már egy másik fájlban), az összes szükséges előtag hozzáadásával minden tulajdonsághoz. Ahhoz, hogy kényszerítse a plugint a passzív munkákkal, elegendő a pszeudo-elem :: helyőrző:</p> :: Playholder (szín: narancs,). Bemenet :: Helyőrző (szín: kék;) <p>Az akkumulátor elemzése után az AutoPrefixer külön CSS fájlt hoz létre, amely az összes szükséges böngésző összes szükséges előtagot írja be.</p> <h2>Mi a következő lépés</h2> <p>Mint már fent írtam, minden, ami kapcsolódik a stílusok használatával a playwords-hez, még nem szabványosított. Hamarosan korrigálódik. A Selector Level 4 specifikációt adtunk hozzá pszeudo-osztályban: a helyőrző által bemutatott, amely végül a Pseudoclass és a Pseudo-elemek őrült keverékéhez vezet. Kövesse a Caniuse támogatását (most már nem támogatott bármilyen böngészőben).</p> <p>Alkalmazza az alábbi stílusokat: a helyőrző által látható, sokkal egyszerűbb lesz:</p> .input: helyőrző látható (szín: kék;) <p>A helyőrző attribútumot az üres elemek bemenetén és a textarea belsejében történő fellépésre használják. Ebben a cikkben figyelembe vesszük a szöveg helyőrző-a stilizálásának képességét, valamint néhány trükköt, amelyek kényelmesebbé teszik és funkcionálisak.</p> <p>Tehát kezdjük meg a példát azok számára, akik nem tudják, hogy mi a helyőrző.</p> <h4>hTML.</h4> <input type="text" placeholder="Hagyja itt az üzenetet"> <p>A helyőrző-egy stílust módosíthatunk olyan CSS-szabályok segítségével:</p> <h4>cSS.</h4> :: - Webkit-bemeneti helyőrző (szín: # C0392B;) :: - Moz-helyőrző (szín: # C0392B;) / * Firefox 19+ * /: -Moz-helyőrző (szín: # C0392B;) / * Firefox 18- * /: -ms-bemeneti helyőrző (szín: # C0392B;) <p>Úgy néz ki, félelmetes, nem igaz? Az a tény, hogy ez még mindig nem szabványos. Minden böngésző támogatta a helyőrző stilizálásának támogatását.</p> <p>Az IE-ben és a régi Firefox (a 18. napig) helyőrzőnek pszeudolasszák, és az új Firefox, Webkit és Blink - Pseudo-elem.</p> <p>Megnézzük, mi történt:</p> <p>Azt kell mondani, hogy nem minden lehetséges CSS tulajdonság támogatott. A legtöbb modern böngésző lehetővé teszi, hogy megváltoztassa:</p> <ul><li>betűtípus (és kapcsolódó tulajdonságok)</li> <li>háttér (és kapcsolódó tulajdonságok)</li> <li>szín</li> <li>szó-távolság</li> <li>betűtávolságok</li> <li>szöveges dekoráció.</li> <li>függőleges</li> <li>szövegszerkezet</li> <li>sormagasság</li> <li>szövegszöveg</li> <li>szöveg túlcsordulás.</li> <li>átlátszatlanság</li> </ul><h2>És ha a helyőrző nem illeszkedik?</h2> <p>Néha a terepi belépési mezők szélességgel csökkennek a Lauta jellemzői miatt, különösen a mobileszközökön. Ebben az esetben a helyőrző-A hosszú szövege csúnya lesz. Ennek megakadályozása érdekében a szöveg túlcsordulást használhat: ellipszis. Az ilyen szintaxis minden új böngészőben fog működni.</p> <h4>cSS.</h4> Bemenet (szöveg túlcsordulás: ellipszis;) bemenet :: - Moz-helyholder (szöveg-túlcsordulás: ellipszis;) bemenet: -moz-placeolder (szöveg-túlcsordulás: ellipszis;) bemenet: -ms-input-placeholder (szöveg-túlcsordulás) : ellipszis;) <h2>Hogyan kell elrejteni a helyőrzőt a fókuszban?</h2> <p>A helyőrző elrejtése más.</p> <ol><li>néhány böngészőben az incomátumban való összpontosítás során</li> <li>más böngészőkben, ha legalább egy beírt szimbólum van</li> </ol><p>Szeretem az első opciót. Annak érdekében, hogy ilyen viselkedést kérjünk minden olyan böngészőben, amely támogatja a helyőrzőt, meghatározzuk a következő CSS-szabályokat:</p> <h4>cSS.</h4> : Focus :: - WebKit-bemeneti helyőrző (szín: átlátszó): Fókusz :: - Moz-helyholder: Fókusz: -Moz-placeolder (szín: átlátszó): Fókusz: -ms-bemeneti helyőrző (szín: átlátszó) <h2>Elrejti a helyőrzőt szépen</h2> <p>Hozzáadhat az átmenetet, hogy megjelenjen és elrejtse a helyőrző-a:</p> <h4>cSS.</h4> / * A helyőrző átláthatóságának sima változása, amikor a fókusz * / .input1 :: - WebKit-bemeneti helyőrző (Opacity: 1, átmenet: Opacity 0.3s Könnyű;) .input1 :: - Moz-helyőrző (Opacity: 1, átmenet: Opnity 0.3s könnyebb;) .input1: -moz-placeolder (opacitás: 1, átmenet: átmenet: Ószhatás: 0.3s Könnyű;) .input1: -ms-bemeneti helyőrző (opacitás: 1; átmenet: Opacity 0.3s). Fókusz :: - Webkit-bemeneti helyőrző (Opacity: 0, átmenet: átmenet: Opacity 0.3s Könnyű;) .Input1: Fókusz: - Moz-helyőrző (Opacity: 0; átmenet: Opacity 0.3s Könnyű;). -Moz-placeolder (Opacity: 0, átmenet: átmenet: Opacacity 0.3s Könnyű;) .input1: fókusz: -ms-bemeneti helyőrző (opacitás: 0; Átmenet: Opacity 0.3s Könnyű; / .input2 :: - Webkit-bemeneti helyőrző (szöveges francia bekezdés: 0px; Átmenet: Text-francia bekezdés 0.3S Könnyű;) .Input2 :: - Moz-helyőrző (szöveges francia bekezdés: 0px; Átmenet: Text-francia bekezdés 0,3 Könnyű;) .input2: -moz-placeolder (szöveges francia bekezdés: 0px; Átmenet: Text-francia bekezdés 0.3S Könnyű;) .Aput2: -ms-bemenet-helymeghatározó R (szöveges francia bekezdés: 0px; Átmenet: Szöveges francia bekezdés 0.3s Könnyű;) .input2: Fókusz: - Webkit-bemeneti helyőrző (szöveges francia bekezdés: 500px; Átmenet: Text-francia bekezdés 0.3S Könnyű;). Szubut2: Fókusz :: - Moz-helyőrző ( Szöveges francia bekezdés: 500px; Átmenet: Text-francia bekezdés 0.3S Könnyű;) .input2: fókusz: -Moz-helyőrző (szöveges francia bekezdés: 500px; Átmenet: Text-francia bekezdés: 0.3. Input-Playholder (szöveges francia bekezdés: 500px; Átmenet: Text-francia bekezdés 0.3S Könnyű,) / * Shift Placeolder-A lefelé, ha a fókusz * / .input3 :: - Webkit-bemeneti helyőrző (vonalmagasság: 20px; Átmenet: Line-Magasság 0.5s Könnyű;) .input3 :: - Moz-helyőrző (vonalmagasság: 20px; Átmenet: vonalmagasság 0.5s könnyebb;) .input3: -moz-placeolder (vonalmagasság: 20px -Height 0.5s Könnyű;) .Input3: -ms-bemeneti helyőrző (vonalmagasság: 20px; Átmenet: vonalmagasság 0.5s Könnyű;) .Input3: Fókusz: - Webkit-bemeneti helytartó (vonalmagasság: 100px; Átmenet: vonalmagasság 0,5S Könnyű;) .Input3: Fókusz: - Moz-helyőrző (vonalmagasság: 100px; Átmenet: vonalmagasság 0.5s Könnyű;). Nput3: fókusz: -Moz-placeold Er (vonalmagasság: 100px; Átmenet: vonalmagasság 0.5s Könnyű;) .Input3: fókusz: -ms-bemeneti helyőrző (vonalmagasság: 100px; Átmenet: vonalmagasság 0,5S) <p>Remélem, hogy hasznos lesz. Írjon megjegyzéseket és javaslatokat a megjegyzésekben.</p> <p>A playcoleder a beviteli mező eleme, amelyben egy tippet helyezhet. Amikor a felhasználó beírja az adatokat, a segédszöveg eltűnik, hogy ne zavarja. Minden böngészőnek van saját véleménye arról, hogy ez az elem megjelenjen, és néha az alapértelmezett stílusok megszakítják az egész designt. Ahhoz, hogy kezelje őket, meg kell használnia a különleges CSS helyőrző szabályt.</p> <h2>Hol van a playcoleder?</h2> <p>A probléma az, hogy a beviteli mező tippje biztonságosan rejtve van a Dom Shadow-ban, és ez nem olyan könnyű eljutni. Ez különleges nem szabványos :: helyszínt használ. Ezzel ellenőrizheti a parancs tulajdonságait.</p> <p>A CSS-ben lévő helyőrző stilizálása így néz ki:</p><p>INPUT :: Playholder (szín: piros, átlátszatlanság: 1, betűtípus-stílus: dőlt;)</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Támogató böngészők</h2> <p>A CSS Placeolder's Pseudo-elemet minden modern böngésző jól feldolgozza, és támogatja a régi böngészőket, használhatja az előtagokat:</p> <ul><li>:: - WebKit-bemeneti helyőrző - webkit böngészőhöz (Safari, Chrome, Opera);</li> <li>:: - Moz-helyőrző - a 19 verzió feletti Firefox böngészők számára;</li> <li>: -Moz-helyőrző - régi Firefox számára;</li> <li>: -Ms-bemeneti helyőrző - az Internet Explorer 10 verziójához.</li> </ul><p>Amint látható, a régi Mozilla böngészők, azaz az IE, azaz a CSS-Pseudoclass helyőrzője, nem pszeudo-elem. Nem vitatkozunk velük, csak vegye figyelembe ezt a szempontot, amikor a beviteli mezőt írja.</p> <p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Stilizációs lehetőségek</h2> <p>A CSS Pseudo-elem helyőrzőjéhez a következő paramétereket állíthatja be:</p> <ul><li>háttér - Az utasítások csoportja az összes beviteli mezőre vonatkozik. Nemcsak a színt (háttérszín), hanem képet is megadhat (háttérkép).</li> <li>szöveg szín - szín;</li> <li>Átláthatóság - átlátszatlanság;</li> <li>aláhúzás, áthúzás vagy kilátás - szöveges dekoráció;</li> <li>regisztráljon - szöveges átalakítás;</li> <li>belső francia bekezdések - Padding. Az összes böngésző nem támogatja. A kisbetűs elemek esetében a felső és alsó ferdeségek figyelmen kívül hagyják.</li> <li>betűtípus-kijelző - A betűtípus, a vonalmagasságú csoport tulajdonságai és számos francia bekezdés (szöveges-illentes, levél-távolság, szóválasztás);</li> <li>függőleges összehangolás a karakterláncban - függőleges-igazítás;</li> <li>szöveg vágása Ha a tartály túlcsordul - szöveges túlcsordulás.</li> </ul> .input1 :: Playholder (mész, mész, kék); szín: fehér, fehér;) .input2 :: Playholder (szöveges dekoráció: vonal-átszállítás, szín: lila, betűsúly: merész; -Size: 16px; levélszöveg: 10px;) .input4 :: Playholder (háttér: barna, szín: fehér, szöveg-túlcsordulás: ellipszis;) <h2>Fókuszban</h2> <p>Alapértelmezés szerint a csúcs csak akkor tűnik ki a beviteli mezőből, ha legalább egy karaktert ad be. De a helyőrző lehetővé teszi, hogy azonnal eltűnjön az eltűnés, amikor a mezőre összpontosít. Ehhez egyesítsen egy pszeudolasszal: fókusz.</p><p>INPUT: FOCUS :: Helyőrző (szín: átlátszó;)</p><p>Bizonyos böngészőkben megengedhető, hogy a leeresztőhueder specifikációjának módosítását az átmeneti utasítás segítségével módosítsa.</p><p>Bemenet :: Playholder (szín: fekete, átmenet: szín 1s;) bemenet: Fókusz :: Színes: fehér;)</p><p>A Google Chrome böngészőben az utasítások színe, amikor egy ilyen mezőre összpontosít, egy másodpercig zökkenőmentesen változik.</p> <p>A playcoleder a beviteli mező eleme, amelyben egy tippet helyezhet. Amikor a felhasználó beírja az adatokat, a segédszöveg eltűnik, hogy ne zavarja. Minden böngészőnek van saját véleménye arról, hogy ez az elem megjelenjen, és néha az alapértelmezett stílusok megszakítják az egész designt. Ahhoz, hogy kezelje őket, meg kell használnia a különleges CSS helyőrző szabályt.</p> <h2>Hol van a playcoleder?</h2> <p>A probléma az, hogy a beviteli mező tippje biztonságosan rejtve van a Dom Shadow-ban, és ez nem olyan könnyű eljutni. Ez egy speciális, nem szabványos pszeudo-elemet használ :: helyőrző. Ezzel ellenőrizheti a parancs tulajdonságait.</p> <p>Szándékában leszel:</p> <p><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>A CSS-ben lévő helyőrző stilizálása így néz ki:</p> <p>iNPUT :: Playholder (szín: piros, átlátszatlanság: 1, betűtípus-stílus: dőlt;) <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.jpg' width="100%" loading=lazy loading=lazy></p><h2>Támogató böngészők</h2> <p>A CSS Placeolder's Pseudo-elemet minden modern böngésző jól feldolgozza, és támogatja a régi böngészőket, használhatja az előtagokat:</p> <ul><li>:: - WebKit-bemeneti helyőrző - webkit böngészőhöz (Safari, Chrome, Opera);</li> <li>:: - Moz-helyőrző - a 19 verzió feletti Firefox böngészők számára;</li> <li>: -Moz-helyőrző - régi Firefox számára;</li> <li>: -Ms-bemeneti helyőrző - az Internet Explorer 10 verziójához.</li> </ul><p>Amint látható, a régi Mozilla böngészők, azaz az IE, azaz a CSS-Pseudoclass helyőrzője, nem pszeudo-elem. Nem vitatkozunk velük, csak vegye figyelembe ezt a szempontot, amikor a beviteli mezőt írja.</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>Stilizációs lehetőségek</h2> <p>A CSS Pseudo-elem helyőrzőjéhez a következő paramétereket állíthatja be:</p> <ul><li>háttér - háttér tulajdonságai. A gyorsblokk háttere a teljes beviteli mezőre vonatkozik. Nemcsak a színt (háttérszín), hanem képet is megadhat (háttérkép).</li> <li>szöveg szín - szín;</li> <li>Átláthatóság - átlátszatlanság;</li> <li>aláhúzás, áthúzás vagy kilátás - szöveges dekoráció;</li> <li>regisztráljon - szöveges átalakítás;</li> <li>belső francia bekezdések - Padding. Az összes böngésző nem támogatja. A kisbetűs elemek esetében a felső és alsó ferdeségek figyelmen kívül hagyják.</li> <li>betűtípus-kijelző - A betűtípus, a vonalmagasságú csoport tulajdonságai és számos francia bekezdés (szöveges-illentes, levél-távolság, szóválasztás);</li> <li>függőleges összehangolás a karakterláncban - függőleges-igazítás;</li> <li>szöveg vágása Ha a tartály túlcsordul - szöveges túlcsordulás.</li> </ul><p>INPUT1 :: Playholder (mész, kék); Szín: fehér;) .input2 :: Playholder (szöveges dekoráció: vonal-átmásolás, szín: lila, betűtípus: merész;). 16px, levél-térfogat: 10px;) .input4 :: Playholder (háttér: barna, szín: fehér, szöveg-túlcsordulás: ellipszis;)</p><h2>Fókuszban</h2> <p>Alapértelmezés szerint a csúcs csak akkor tűnik ki a beviteli mezőből, ha legalább egy karaktert ad be. De a CSS placeolder pszeudo-eleme lehetővé teszi, hogy azonnal eltűnjön az eltűnés, amikor a mezőre összpontosít. Ehhez egyesítsen egy pszeudolasszal: fókusz.</p> <p>iNPUT: FOCUS :: Helyőrző (szín: átlátszó;)</p><p>Bizonyos böngészőkben megengedhető, hogy a leeresztőhueder specifikációjának módosítását az átmeneti utasítás segítségével módosítsa.</p> <p>bemenet :: Playholder (szín: fekete, átmenet: szín 1s;) bemenet: Fókusz :: Színes: fehér;)</p><p>A Google Chrome böngészőben az utasítások színe, amikor egy ilyen mezőre összpontosít, egy másodpercig zökkenőmentesen változik.</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> <div class="dsperelink"> <div class="read-analog"> <style> </style> <style> #perelink-horizontal { vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 192px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img { width: 192px; height: 192px; margin-bottom: 10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/hu/kak-sozdat-png-s-prozrachnostyu-v-adobe-photoshop-versii-cc-i-vyshe-pochemu-photoshop-ne.html"> <img src="/uploads/93fe94cb7c619bb0b0403d4629876643.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Miért nem tudja megfelelően megnyitni ezt a png-t?</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/hu/pochemu-zakryvaetsya-fotoshop-vosstanovlenie-failov-adobe-photoshop-psd.html"> <img src="/uploads/d4019df9bded06f6065dc0b231f612a2.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Állítsa vissza az Adobe Photoshop fájlokat (</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/hu/kak-v-fotoshope-sdelat-sneg-realistichnyi-padayushchii-sneg-na-zimnih.html"> <img src="/uploads/64e9440d96bfb2bccef436fd8913eaa0.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Milyen gyorsan és önállóan csinál egy gyönyörű kollázs a Photoshopban, hogy megszabaduljon a nem kívánt tárgyaktól a képen</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/hu/ischezayut-linii-ot-kisti-v-fotoshope-reshaem-problemu-s-propavshim.html"> <img src="/uploads/a68f8a3beadd2c7f16bb441d1b0f9617.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Megoldjuk a problémát a Photoshop hiányzó ecset kontúrjával</span> </a> </div> </div> </div> </div> </div> </article> </div> </section> <aside class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="mainnavbar side-box clear"> <div id="nav_menu-2" class="side-box_b"> <div class="menu-sidenav-container"> <ul id="menu-sidenav" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/total/">Tábornok</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/hard-drive/">HDD</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/different/">vegyes cikkek</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/windows/">ablakok</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/apple/">alma</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/android/">Android</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/browsers/">Böngészők</a> </li> </ul> </div> </div> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">Legjobb 5:</span> <ul class="textw_a clear"> <li><a href="https://olympsb.ru/hu/podpisi-k-fotografiyam-na-vypusknoi-v-shkole-shkolnaya-gazeta.html">Iskolai újság "csak osztály</a></li> <li><a href="https://olympsb.ru/hu/shkolnaya-gazeta-prosto-klass-podborka-citat-i-statusov-pro.html">Az iskolai fotók feliratainak diplomájával és diplomásával kapcsolatos idézetek és státuszok kiválasztása</a></li> <li><a href="https://olympsb.ru/hu/adobe-bridge-ne-otkryvaet-camera-raw-aktivirovat-plagin-camera-raw-dlya-adobe-bridge-cc.html">Aktiválja a Camera RAW plugin Adobe Bridge CC (ingyenes), a vásárlás Photoshop Elements - valaki próbálta?</a></li> <li><a href="https://olympsb.ru/hu/risuem-klyaksu-sozdaem-kaplyu-chernilnaya-klyaksa-v-uroke-fotoshopa-risuem.html">Rajzolj egy klyaks-t, hozzon létre egy cseppet, tinta blotokat egy fotós széklet graffiti ecsettel</a></li> <li><a href="https://olympsb.ru/hu/sohranenie-dokumenta-v-vorde-kombinacii-klavish-sohranit.html">Kulcskombinációk Mentés Fájl gyorsbillentyűk</a></li> </ul> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">Legutóbbi anyagok:</span> <ul> <li> <a href="https://olympsb.ru/hu/oformlenie-fotografii-v-stile-fentezi-uroki-fotoshop-obrabotka-foto-v-stile.html" >Fantasy stílusú design</a> </li> <li> <a href="https://olympsb.ru/hu/kisti-chernilnye-klyaksy-dlya-fotoshopa-risuem-klyaksu-sozdaem-kaplyu.html" >Rajzoljon egy virágot, hozzon létre egy csepp, tinta blots egy fotóiskola leckét</a> </li> <li> <a href="https://olympsb.ru/hu/uroki-fotoshop-obrabotka-foto-v-stile-fentezi-kartina-so-skripachkoi-v.html" >fantasy fotófeldolgozás</a> </li> <li> <a href="https://olympsb.ru/hu/reshaem-problemu-s-propavshim-konturom-kisti-v-fotoshope-kak.html" >Hogyan kell létrehozni egy kefét a Photoshopban</a> </li> <li> <a href="https://olympsb.ru/hu/kak-pomenyat-vremya-sutok-v-fotoshope-menyaem-vremya-sutok-na-fotografii.html" >Módosítsa a napszakot a képen</a> </li> </ul> </div> <div class="side-box clear"> <div id="rexuta2" style="height:800px;width:240px;" align="center"></div> </div> </aside> </section> <div class="footer"> <div id="footer_mainnav" class="mainnav collapse navbar-collapse col-xs-12 col-sm-12"> <ul id="menu-mainnav-1" class="nav navbar-nav navi"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/flash-drives/">Flash meghajtók</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/total/">Tábornok</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/hard-drive/">HDD</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/different/">vegyes cikkek</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/hu/category/windows/">ablakok</a></li> </ul> </div> <div class="twobl-footer col-xs-12 col-sm-12"> <div class="onef col-xs-12 col-sm-3"> <div class="fool2og log-m_h1"> <img src='/public/logo.png' loading=lazy loading=lazy> </div> <div class="decksite"></div> </div> <div class="twof col-xs-12 col-sm-2"> <ul id="menu-foonav" class="twonavig"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/hu/category/apple/">alma</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/hu/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/hu/category/browsers/">Böngészők</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/hu/category/flash-drives/">Flash meghajtók</a></li> </ul> </div> <div class="treef col-xs-12 col-sm-4"> <ul class="f-post"> <li><a href="https://olympsb.ru/hu/fail-psd-prevratit-v-jpg-dobavte-psd-faily-v-fotokonverter.html">Adja hozzá a PSD fájlokat egy fényképváltóhoz</a></li> <li><a href="https://olympsb.ru/hu/sozdanie-staroi-gazety-v-photoshop-delaem-v-fotoshop-tekst-vyrezannyi.html">Az újságokból faragott Photoshop szövegben van, fehér szakadt élek</a></li> <li><a href="https://olympsb.ru/hu/kak-opredelit-cvet-v-photoshop-kak-opredelit-cvet-v-fotoshope-kak-zamenit-odin.html">Hogyan lehet meghatározni a színt a Photoshopban?</a></li> <li><a href="https://olympsb.ru/hu/kak-razmyt-kraya-v-fotoshope-kak-legko-i-bystro-sdelat.html">Hogyan gyorsan és gyorsan készítsen homályos éleket a Photoshopban?</a></li> </ul> </div> <div class="fourf col-xs-12 col-sm-3"> <div class="buth"> <a class="butt-faq buttorang" href="" title="névjegyzék">Névjegyzék</a> </div> <p class="continfo">Számítógép súgó Olympus</div> </div> <div class="tree-footer col-xs-12 col-sm-12 clear"> © 2021. OLYMPSB.RU. Számítógép súgó Olympus.</div> </div> <script src="https://olympsb.ru/wp-content/themes/vsepropechen/js/bootstrap.min.js"></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.83'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.7.6'></script> <div style="display:none"> <div id="text-3" class="conter-metr"> <div class="textwidget"> </script> </div> </div> </div> <div id="top-link"> <a href="https://olympsb.ru/hu/#top"></a> </div> <script type="text/javascript">  </script><br> <br> </body> </html> </div>