Tervezési helyőrző css. CSS-stílus hozzáadása a helyőrzőhöz

A helyőrző egy beviteli mező eleme, amelybe eszközleírás helyezhető el. Amikor a felhasználó elkezdi beírni az adatokat, a támogató szöveg eltűnik, hogy ne zavarjon. Minden böngészőnek megvan a saját véleménye arról, hogyan kell ezt az elemet megjeleníteni, és néha az alapértelmezett stílusok megtörik a teljes megjelenést. Ezek kezeléséhez speciális CSS-helyőrző szabályt kell használnia.

Hol van a helyőrző?

A probléma az, hogy a beviteli mező eszköztippje szilárdan el van rejtve az árnyék DOM-ban, és nem olyan könnyű elérni. Ehhez egy speciális, nem szabványos CSS::placeholder pszeudoelemet használnak. Segítségével kezelheti az eszköztipp tulajdonságait.

Érdekelni fog:

A helyőrző stílusa a CSS-ben így néz ki:

input::placeholder ( szín: piros; átlátszatlanság: 1; betűstílus: dőlt; )

Böngésző támogatás

A CSS helyőrző pszeudoelemet mindenki jól kezeli modern böngészők, és a régebbi böngészők támogatásához használhatja a következő előtagokat:

::-webkit-input-placeholder - webkit böngészőkhöz (Safari, Chrome, Opera);
::-moz-helyőrző - for Firefox böngészők 19-es verzió felett;
:-moz-placeholder - régebbi Firefoxhoz;
:-ms-input-placeholder - for internet böngésző 10-es verzió felett.

Mint látható, a régebbi Mozilla böngészők, valamint az IE a helyőrzőt CSS-álosztálynak tekintik, nem pedig pszeudoelemnek. Ne vitatkozzunk velük, csak ezt a szempontot vesszük figyelembe a beviteli mező stílusánál.

Styling opciók

A CSS-ben a helyőrző pszeudoelem beállítható következő paramétereket:

háttér - háttértulajdonságok csoportja. A tippblokk háttere a teljes beviteli mezőre vonatkozik. Nem csak a színt (háttérszín), hanem a képet (háttér-kép) is beállíthatja.
szöveg színe - színe;
átlátszóság - átlátszatlanság;
aláhúzás, áthúzás vagy áthúzás - szövegdíszítés;
eset - szöveg-transzformáció;
belső bemélyedések – padding. Nem minden böngésző támogatja. A beágyazott elemekhez hasonlóan a felső és alsó kitöltés figyelmen kívül marad.
font megjelenítése - a betűcsoport tulajdonságai, sormagasság és különféle behúzások (szöveg-behúzás, betűköz, szóköz);
függőleges igazítás egy vonalban - függőleges igazítás;
szöveg kivágása, amikor a tároló túlcsordul – szöveg-túlcsordulás.

Input1::placeholder ( háttér-kép: lineáris gradiens(lime, kék); szín: fehér; ) .input2::placeholder ( szövegdekoráció: átmenő; szín: lila; betűsúly: félkövér; ) .input3 ::helyőrző ( betűméret: 16 képpont; betűköz: 10 képpont; ) .input4::placeholder ( háttér: barna; szín: fehér; szövegtúlcsordulás: ellipszis; )

Fókuszban

Alapértelmezés szerint az eszköztipp csak akkor tűnik el a beviteli mezőből, ha legalább egy karaktert beírtunk abba. A CSS-helyőrző pszeudoelem azonban lehetővé teszi a fading azonnali megvalósítását, amikor a mezőre fókuszál. Ehhez kombinálni kell a pszeudoosztály:fókusszal.

input:focus::placeholder ( szín: átlátszó; )

Egyes böngészőkben lehetőség van számos helyőrző tulajdonság változásainak animálására az átmeneti utasítás használatával.

input::placeholder ( szín: fekete; átmenet: szín 1s; ) input:focus::placeholder ( szín: fehér; )

A böngészőben Google Chrome Ha egy ilyen mezőre fókuszál, a tipp színe egy másodpercen belül simán megváltozik.

A helyőrzők, azok a gyakran kiszürkült szövegelemek a bemeneten belül, nehézségekbe ütközhetnek a stílusban. Szerencsére beszereztünk egy rövid, de hatékony CSS-megoldást, amellyel a bemeneti helyőrző szövegét tetszőleges színben és átlátszósággal alakíthatjuk ki. Olvassa el a kódot.

Helyőrző szöveg színének módosítása

Kezdjük egy egyszerű bevitellel és néhány helyőrző szöveggel, ebben a példában a "keresés" szót használjuk, de bármit használhat, amit akar. Az alap HTML alább található:

HTML

A beviteli (és a szövegterület) helyőrző szöveg alapértelmezés szerint világosszürke színű, de ezt néhány soros CSS-sel megváltoztathatjuk. Itt pirosra színezzük a beviteli szöveget egy HTML színnév használatával, de bármilyen színmód elegendő (HEX, RGB, HSL).

CSS

::-webkit-input-placeholder ( /* Chrome */ szín: piros; ) :-ms-input-placeholder ( /* IE 10+ */ szín: piros; ) ::-moz-placeholder ( /* Firefox 19 + */ szín: átlátszatlanság: 1 ) :-moz-placeholder ( /* Firefox 4 - 18 */ szín: piros; átlátszatlanság: 1; )

Ne feledje, hogy fontos a különböző gyártói előtagok megadása, hogy a lehető legtöbb böngészőt támogassa. Csak a Firefox bemeneti helyőrző szövege alapértelmezés szerint enyhe átlátszóságot mutat, így nem szükséges beállítani az átlátszatlanság tulajdonságot IE-n vagy Chrome-on.

Helyőrző fókusz szövegszínének módosítása

Rendben, sikeresen megváltoztattuk a helyőrző szöveg színét pirosra, de jó lenne, ha valami történne, amikor a felhasználó rákattint a bevitelünkre. Ugyanazokkal a szállítói előtagú CSS-tulajdonságokkal módosíthatjuk a bemeneti helyőrző szöveg átlátszatlanságát fókuszban.

CSS

bemenet ( körvonal: nincs; kitöltés: 12 képpont; szegélysugár: 3 képpont; szegély: 1 képpont tömör fekete; ) ::-webkit-input-placeholder ( /* Chrome */ szín: piros; átmenet: átlátszatlanság 250 ms könnyű be-ki ; ) :focus::-webkit-input-placeholder ( opacitás: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ szín: piros; átmenet: átlátszatlanság 250 ms könnyű be-ki; ) :focus :-ms-input-placeholder ( átlátszatlanság: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ szín: piros; átlátszatlanság: 1; átmenet: átlátszatlanság 250 ms könnyű be-kimenet; ) :focus:: -moz-placeholder ( átlátszatlanság: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ szín: piros; átlátszatlanság: 1; átmenet: átlátszatlanság 250ms könnyű be-be; ) :focus:-moz-placeholder (átlátszatlanság: 0,5;)

A fenti példában néhány alapvető stílust bevetettünk magán a bemeneten, és hozzáadtunk egy átmenetet az átlátszatlansághoz, hogy egy kicsit szebb legyen az élmény. Tekintse meg a bemutatót, és kísérletezzen más CSS-tulajdonságokkal és átmenetekkel.

Hol van a helyőrző?

A probléma az, hogy a beviteli mező eszköztippje szilárdan el van rejtve az árnyék DOM-ban, és nem olyan könnyű elérni. Ehhez egy speciális, nem szabványos ::helyőrzőt használnak. Segítségével kezelheti az eszköztipp tulajdonságait.

A helyőrző stílusa a CSS-ben így néz ki:

Bemenet::helyőrző ( szín: piros; átlátszatlanság: 1; betűstílus: dőlt; )

Böngésző támogatás

A CSS helyőrző pszeudoelemet minden modern böngésző jól kezeli, és a régebbi böngészők támogatásához a következő előtagokat használhatja:

::-webkit-input-placeholder - webkit böngészőkhöz (Safari, Chrome, Opera);
::-moz-placeholder - 19-es verzió feletti Firefox böngészőkhöz;
:-moz-placeholder - régebbi Firefoxhoz;
:-ms-input-placeholder – az Internet Explorer 10-es verziója felett.

Styling opciók

A CSS-ben a helyőrző pszeudoelemhez a következő beállításokat adhatja meg:

háttér - az eszköztipp blokkcsoport a teljes beviteli mezőre vonatkozik. Nem csak a színt (háttér-szín), hanem a képet (háttér-kép) is beállíthatja.
szöveg színe - színe;
átlátszóság - átlátszatlanság;
aláhúzás, áthúzás vagy áthúzás - szövegdíszítés;
eset - szöveg-transzformáció;
belső bemélyedések – padding. Nem minden böngésző támogatja. A beágyazott elemekhez hasonlóan a felső és alsó kitöltés figyelmen kívül marad.
font megjelenítése - a betűcsoport tulajdonságai, sormagasság és különféle behúzások (szöveg-behúzás, betűköz, szóköz);
függőleges igazítás egy vonalban - függőleges igazítás;
szöveg kivágása, amikor a tároló túlcsordul – szöveg-túlcsordulás.

.input1::placeholder ( background-image: linear-gradient(lime, blue); color: white; ) .input2::placeholder ( szövegdekoráció: vonalvezetés; szín: lila; betűsúly: félkövér; ) . input3::placeholder ( betűméret: 16 képpont; betűköz: 10 képpont; ) .input4::placeholder ( háttér: barna; szín: fehér; szöveg-túlcsordulás: ellipszis; )

Fókuszban

Alapértelmezés szerint az eszköztipp csak akkor tűnik el a beviteli mezőből, ha legalább egy karaktert beírtunk abba. De a helyőrző lehetővé teszi, hogy azonnal végrehajtsa az eltűnést, amikor a mezőre fókuszál. Ehhez kombinálni kell a pszeudoosztály:fókusszal.

Bemenet:fókusz::helyőrző ( szín: átlátszó; )

Egyes böngészőkben lehetőség van számos helyőrző tulajdonság változásainak animálására az átmeneti utasítás használatával.

Input::placeholder ( szín: fekete; átmenet: szín 1s; ) input:focus::placeholder ( szín: fehér; )

BAN BEN Google böngésző Ha egy ilyen mezőre fókuszál, a Chrome eszköztipp színe egy másodpercen belül simán megváltozik.

A helyőrző attribútum segítségével eszköztippeket hozhat létre üres beviteli mezőkben (címkék És ). Ebben a cikkben megvizsgálom a helyőrzők stílusának kialakításának módjait, valamint azt, hogyan tehetjük őket felhasználóbarátabbá.</p> <p>Kezdjük egy példával azoknak, akik még nem tudják, mi az a helyőrző, é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>A felületek fejlesztésénél figyelembe kell venni a helyőrzők viselkedését. A helyőrző szöveg a gépelés megkezdésekor azonnal eltűnik. Éppen ezért ne használja őket magáról a beviteli mezőről információ továbbítására (hány és milyen karaktert kell tartalmaznia). Erre a célra a legjobb a címkét használni <label>vagy egy bekezdést egy kis utalással. A helyőrzők használatának funkcióiról bővebben olvashat.</p> <h2>Stilizáció</h2> <p>A következő szabályokat kell használni a helyőrzők stílusához:</p>::-webkit-input-placeholder ( szín : kék ; ) ::-moz-placeholder ( szín : kék ; ) /* Firefox 19+ */ :-moz-placeholder ( szín : kék ; ) /* Firefox 18- * / :-ms-input-placeholder ( szín : kék ; ) <p>Szörnyen néz ki, nem? És ennek meg is van az oka - eddig a helyőrzőkre vonatkozó CSS-szabályok nem voltak szabványosítva, és a megvalósítás minden böngészőben eltérő. További információ az összes szükséges előtagról a caniuse oldalon található.</p> <p>Ha CSS-előfeldolgozót használ, akkor valószínűleg egy egyszerű mixet írhat a legkényelmesebben, hogy stílusokat alkalmazzon a helyőrzőkre. Példa a Sass-ban:</p>@mixin helyőrző ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-helyőrző ( @content ; ) & : :- moz-helyőrző ( @content ; ) & : - ms-input-placeholder ( @tartalom ; ) ) <p>A kontextustól függően egy mixin használható stílusok alkalmazására globálisan vagy egyedi elemek alapján (próbálja ki a SassMeister-en):</p> <span>// Globálisan minden beviteli mezőhöz</span>@include helyőrző ( szín : kék ; ) <span>// Adott beviteli mezőkhöz</span>.input ( @include helyőrző ( szín : zöld ; ) ) <h4>Példa</h4> <p>Kék szöveg a helyőrzőhöz (soha ne tegye ezt):</p>.blue-text ::-webkit-input-placeholder ( szín : #2e8ece ; ) .blue-text :-moz-placeholder ( szín : #2e8ece ; ) .blue-text ::-moz-placeholder ( szín : #2e8ece ; .blue-text :-ms-input-placeholder ( szín : #2e8ece ; ) <p> <input type="text" placeholder="Kezdje el itt a gépelést" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Támogatott tulajdonságok</h2> <p>Nem minden <a href="https://realbazar.ru/hu/games-for-android/cvet-shrifta-zadaetsya-atributom-tega-font-family-font-size-color-i-drugie-svoistva-css/">CSS tulajdonság</a> helyőrzőkkel használható. Itt <a href="https://realbazar.ru/hu/updates-and-firmware/udalit-nepravilno-ustanovlennuyu-programmu-kak-udalit-programmu-s/">teljes lista</a> támogatott tulajdonságok:</p> <ul><li>betűtípus és minden kapcsolódó tulajdonság (font-size, font-family 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öveg-behúzás</li> <li>szöveg-túlcsordulás</li> <li>szín</li> <li>szöveg-átalakítás</li> <li>vonalmagasság</li> <li>szóköz</li> <li>betűtávolságok</li> <li>szöveg-dekoráció</li> <li>függőleges igazítás</li> </ul><h2>Animációk</h2> <p>Az animációs ötletek a html5.by bloghoz tartoznak.</p> <p>A következő példák mindegyike a Sass előfeldolgozóval íródott. Mindegyikhez tartozik egy hivatkozás a SassMeisterhez, ahol megtalálhatja a lefordított CSS-kódot.</p> <p>Valószínűleg animációkat szeretne alkalmazni a helyőrzőkre, ha a beviteli mező fókuszban van. Mindez egészen egyszerűen történik. Elég az előzőleg megírt helyőrző mixint néhányszor használni:</p>.input ( @include helyőrző ( <span>// Stílusok normál állapothoz</span>) & :focus ( @include helyőrző ( <span>// Stílusok a fókusz esemény után</span> } } } <h3>Változtassa meg az átláthatóságot</h3>.input ( @include helyőrző ( szín : #aaa ; átlátszatlanság : 1 ; átmenet : átlátszatlanság 300 ms ; ) & :focus ( @include helyőrző ( átlátszatlanság : 0 ; ) ) ) <p> <input type="text" placeholder="Demo: Az átlátszóság megváltoztatása" class="demo-css-placeholders-input pl-opacity"></p> <h3>Váltás jobbra és balra</h3> <p>Minél szélesebb a beviteli mező, annál nagyobbnak kell lennie a text-indent tulajdonság értékének. Szabványos beviteli mezőhöz az 500px is elég lesz, ezt manuálisan kell kiválasztani. Az animáció sebessége a beviteli mező szélességétől és a behúzás értékétől függ. A balra toláshoz negatív értékeket kell használni, például -500 képpont .</p><p> <input type="text" placeholder="Demo: váltás jobbra" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: balra váltás" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Váltás lefelé</h3> <p>Az előző példához hasonlóan az animáció a bemenet méretétől függ, de ebben az esetben ügyeljen a magasságra. A beviteli mezők túlnyomó többségénél a szükséges sormagasság értéke 100 képponton belül van. Sajnos a line-height tulajdonság nem használható felfelé eltolási hatás létrehozására, mivel a tulajdonság nem fogad el negatív értékeket.</p>.input ( @include helyőrző ( text-indent : 0px ; átmenet : text-indent 300 ms ; ) & :focus ( @include placeholder ( text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Demo: váltás lefelé" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Együtt</h3> <p>Annak érdekében, hogy a helyőrzők animációs kódja kellemes és kényelmes legyen, bármilyen előfeldolgozóhoz írhat egy kis mixinkönyvtárat. A könyvtár így néz ki ():</p>@mixin helyőrző ( & : :- webkit-input-placeholder ( @content ) & : - moz-helyőrző ( @content ) & : :- moz-helyőrző ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($oldal : bal , $pozíció : 500px , $idõtartam : 200ms ) ( @include placeholder ( text-indent : 0 ; transfer : text-indent $duration ; ) & :focus ( @include placeholder ( text-indent : if ($oldal == balra , - $pozíció , $pozíció ) ) ) @mixin pl-slide-down ($pozíció : 5 , $idõtartam : 200ms ) ( @include placeholder ( line-height : 1 ; átmenet : line-height $duration ) & :focus ( @include placeholder ( line-height : $position ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include placeholder ( opacitás : 1 ; átmenet : átlátszatlanság $duration ) & :focus ( @include helyőrző ( átlátszatlanság : 0 ; ) ) <p>Nagyon könnyen használható. Elég csatlakoztatni a kívánt mixint bármely beviteli mezőhöz, vagy egyszerűen létrehozni egy globális szabályt az oldalon lévő összes paceholder számára:</p> <span>// Az egyes elemekhez</span>.pl-shift-right ( @include pl-shift (jobbra ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// Minden másért</span>@include pl-shift (balra ); <h2>Autoprefixer</h2> <p>Ha nem használ előfeldolgozót, és továbbra sem szeretné, hogy a CSS-forrásfájl az összes lehetséges böngésző előtagjainak zűrzavarává váljon, akkor vessen egy pillantást az Autoprefixerre. Segítségével a tiszta CSS piszkossá tehető (de más fájlban), ha minden tulajdonsághoz hozzáadja az összes szükséges előtagot. Ahhoz, hogy a bővítmény helyőrzőkkel működjön, csak használja a pszeudoelemet::placeholder:</p>::helyőrző ( szín : narancssárga ; ) . input::placeholder(szín:kék;) <p>A stílusok elemzése után az Autoprefixer külön CSS-fájlt hoz létre, amelybe beírja az összes szükséges előtagot az összes megadott böngészőhöz.</p> <h2>Mi a következő lépés</h2> <p>Ahogy fentebb is írtam, még nincs szabványosítva minden, ami a stílusok helyőrzőkre történő alkalmazásával kapcsolatos. Ezt hamarosan kijavítják. A Selector Level 4 specifikációja hozzáadott egy pszeudoosztályt: placeholder-shown , amely végre szabványosítja a jelenleg létező álosztályok és pszeudoelemek őrült keverékét. Figyelemmel kísérheti a caniuse támogatását (jelenleg egyik böngésző sem támogatja).</p> <p>A stílusok alkalmazása a :placeholder-shown segítségével sokkal egyszerűbb lesz:</p>.input :placeholder-shown ( szín : kék ; )<script type="text/javascript">  </script><br> <br> <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> </article> <div id="post-ratings-1455-loading" class="post-ratings-loading"> <img src="https://realbazar.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy loading=lazy>Betöltés...</div> </main> </section> <div id="right-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"> <div class="inside-right-sidebar"> <aside id="wpp-3" class="widget inner-padding popular-posts"> <h4 class="widget-title">Népszerű</h4> <ul class="wpp-list wpp-list-with-thumbnails"> <li> <a href="https://realbazar.ru/hu/news/iz-kakih-otelei-v-gorise-otkryvayutsya-krasivye-vidy-chudesa-armyanskoi-prirody/" title="Az örmény természet csodái: kőerdő és Goris Goris barlangjai – Örmény Kappadókia" target="_self"><img src="/uploads/b8bb4c414c356eb260ca7873493bcbdb.jpg" width="195" height="98" alt="Az örmény természet csodái: kőerdő és Goris Goris barlangjai – Örmény Kappadókia" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/news/iz-kakih-otelei-v-gorise-otkryvayutsya-krasivye-vidy-chudesa-armyanskoi-prirody/" title="Az örmény természet csodái: kőerdő és Goris Goris barlangjai – Örmény Kappadókia" class="wpp-post-title" target="_self">Az örmény természet csodái: kőerdő és Goris Goris barlangjai – Örmény Kappadókia</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/series-galaxy-note/smartfon-nubiya-z11-obzor-smartfona-zte-nubia-z11-mini-kitaicy-znayut-tolk-v-stile/" title="A ZTE Nubia Z11 mini okostelefon áttekintése: a kínaiak sokat tudnak a stílusról" target="_self"><img src="/uploads/5be5f9606ee186039271d8a07ae49122.jpg" width="195" height="98" alt="A ZTE Nubia Z11 mini okostelefon áttekintése: a kínaiak sokat tudnak a stílusról" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/series-galaxy-note/smartfon-nubiya-z11-obzor-smartfona-zte-nubia-z11-mini-kitaicy-znayut-tolk-v-stile/" title="A ZTE Nubia Z11 mini okostelefon áttekintése: a kínaiak sokat tudnak a stílusról" class="wpp-post-title" target="_self">A ZTE Nubia Z11 mini okostelefon áttekintése: a kínaiak sokat tudnak a stílusról</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/news/konvertirovat-iz-jpg-v-dwg-autocad-sohranyaem-chertezh-v-jpeg-chem-otkryt/" title="AutoCAD: Rajz mentése JPEG formátumban" target="_self"><img src="/uploads/4424462de4c669c97b32c1cbab2add1f.jpg" width="195" height="98" alt="AutoCAD: Rajz mentése JPEG formátumban" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/news/konvertirovat-iz-jpg-v-dwg-autocad-sohranyaem-chertezh-v-jpeg-chem-otkryt/" title="AutoCAD: Rajz mentése JPEG formátumban" class="wpp-post-title" target="_self">AutoCAD: Rajz mentése JPEG formátumban</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/series-galaxy-note/proshivka-android-s-pomoshchyu-utility-fastboot-proshivka-telefona-cherez/" title="Villogó telefon firmware számítógépen keresztül" target="_self"><img src="/uploads/f5bc96d55da5590d388ccc7e7ea0df7f.jpg" width="195" height="98" alt="Villogó telefon firmware számítógépen keresztül" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/series-galaxy-note/proshivka-android-s-pomoshchyu-utility-fastboot-proshivka-telefona-cherez/" title="Villogó telefon firmware számítógépen keresztül" class="wpp-post-title" target="_self">Villogó telefon firmware számítógépen keresztül</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/games-for-android/poluchenie-rut-prav-cherez-baidu-root-baidu-root-russkaya-versiya-skachat/" title="Baidu Root (orosz verzió) Töltse le a baidu root 2 programot" target="_self"><img src="/uploads/5a849b03794509c087bd9d1ad2f7e068.jpg" width="195" height="98" alt="Baidu Root (orosz verzió) Töltse le a baidu root 2 programot" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/games-for-android/poluchenie-rut-prav-cherez-baidu-root-baidu-root-russkaya-versiya-skachat/" title="Baidu Root (orosz verzió) Töltse le a baidu root 2 programot" class="wpp-post-title" target="_self">Baidu Root (orosz verzió) Töltse le a baidu root 2 programot</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> </ul> </aside> <style>.rpwe-block ul{ list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li{ border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a{ display: inline !important; text-decoration: none; } .rpwe-block h3{ background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 16px !important; line-height: 1.5em; } .rpwe-thumb{ border: 2px solid #eee !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary{ font-size: 14px; } .rpwe-time{ color: #bbb; font-size: 11px; } .rpwe-comment{ color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft{ display: inline; float: left; } .rpwe-alignright{ display: inline; float: right; } .rpwe-aligncenter{ display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after{ content: ""; display: table !important; } .rpwe-clearfix:after{ clear: both; } .rpwe-clearfix{ zoom: 1; } </style><aside id="rpwe_widget-2" class="widget inner-padding rpwe_widget recent-posts-extended"><h4 class="widget-title">Legutóbbi bejegyzések</h4><div class="rpwe-block "><ul class="rpwe-ul"> <li> <a href="https://realbazar.ru/hu/games-for-android/kak-uznat-skrytyi-nomer-telefona-kak-zablokirovat-zvonki/" title="Ismeretlen számokról érkező hívások blokkolása A kimenő szám helyett az ismeretlent írja ki" target="_self"><img src="/uploads/59160f3def83e46a4d2d4f3430165e3f.jpg" width="195" height="98" alt="Ismeretlen számokról érkező hívások blokkolása A kimenő szám helyett az ismeretlent írja ki" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/games-for-android/kak-uznat-skrytyi-nomer-telefona-kak-zablokirovat-zvonki/" title="Ismeretlen számokról érkező hívások blokkolása A kimenő szám helyett az ismeretlent írja ki" class="wpp-post-title" target="_self">Ismeretlen számokról érkező hívások blokkolása A kimenő szám helyett az ismeretlent írja ki</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/the-galaxy-s-series/mobilnyi-internet-v-gonkonge-sim-karty-v-gonkonge-gonkong-eto/" title="Mobil internet Hongkongban" target="_self"><img src="/uploads/48856af8cf810a890c32a1c54a2a01ad.jpg" width="195" height="98" alt="Mobil internet Hongkongban" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/the-galaxy-s-series/mobilnyi-internet-v-gonkonge-sim-karty-v-gonkonge-gonkong-eto/" title="Mobil internet Hongkongban" class="wpp-post-title" target="_self">Mobil internet Hongkongban</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/samsung-galaxy-s6-edge/razdaem-vai-fai-noutbuka-windows-8-kak-organizovat-razdachu-wifi-na-noutbuke-v/" title="A WiFi elosztás megszervezése laptopon a parancssorban: Videó" target="_self"><img src="/uploads/12090b4dbf4170763daa4d6389fb87cf.jpg" width="195" height="98" alt="A WiFi elosztás megszervezése laptopon a parancssorban: Videó" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/samsung-galaxy-s6-edge/razdaem-vai-fai-noutbuka-windows-8-kak-organizovat-razdachu-wifi-na-noutbuke-v/" title="A WiFi elosztás megszervezése laptopon a parancssorban: Videó" class="wpp-post-title" target="_self">A WiFi elosztás megszervezése laptopon a parancssorban: Videó</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/the-galaxy-s-series/kak-podklyuchit-audio-k-materinskoi-plate-podklyuchaem-elementy-sistemy-k/" title="Rendszerelemek csatlakoztatása az alaplaphoz" target="_self"><img src="/uploads/da586bda1357936037152fd2d029a7cb.jpg" width="195" height="98" alt="Rendszerelemek csatlakoztatása az alaplaphoz" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/the-galaxy-s-series/kak-podklyuchit-audio-k-materinskoi-plate-podklyuchaem-elementy-sistemy-k/" title="Rendszerelemek csatlakoztatása az alaplaphoz" class="wpp-post-title" target="_self">Rendszerelemek csatlakoztatása az alaplaphoz</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> <li> <a href="https://realbazar.ru/hu/comparison/chto-delat-esli-ne-vklyuchaetsya-telefon-kak-ozhivit-smartfon/" title="Hogyan lehet feléleszteni egy okostelefont, amely nem reagál az érintésre Az okostelefon nem reagál jól az érintésre, mit tegyünk" target="_self"><img src="/uploads/98fd5b9f2fb718df02d2e0d88956eca7.jpg" width="195" height="98" alt="Hogyan lehet feléleszteni egy okostelefont, amely nem reagál az érintésre Az okostelefon nem reagál jól az érintésre, mit tegyünk" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/hu/comparison/chto-delat-esli-ne-vklyuchaetsya-telefon-kak-ozhivit-smartfon/" title="Hogyan lehet feléleszteni egy okostelefont, amely nem reagál az érintésre Az okostelefon nem reagál jól az érintésre, mit tegyünk" class="wpp-post-title" target="_self">Hogyan lehet feléleszteni egy okostelefont, amely nem reagál az érintésre Az okostelefon nem reagál jól az érintésre, mit tegyünk</a> <span class="wpp-excerpt">Olyan embernek, akinek megvan a maga játéka...</span> <br><br> </li> </ul></div></aside><aside id="custom_html-2" class="widget_text widget inner-padding widget_custom_html"> <div class="textwidget custom-html-widget"> </div> </aside> </div> </div> </div> </div> <div class="site-footer grid-container grid-parent "> <div id="footer-widgets" class="site footer-widgets"> <div class="footer-widgets-container grid-container grid-parent"> <div class="inside-footer-widgets"> <div class="footer-widget-1 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="categories-3" class="widget inner-padding widget_categories"> <h4 class="widget-title">Kategóriák</h4> <ul> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/hu/category/samsung-galaxy-s3/" title="Samsung Galaxy S3">Samsung Galaxy S3</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/hu/category/samsung-galaxy-s5/" title="Samsung Galaxy S5">Samsung Galaxy S5</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/hu/category/games-for-android/" title="Android játékok">Android játékok</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/hu/category/news/" title="hírek">hírek</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/hu/category/an-overview-of-the-devices/" title="Eszköz áttekintése">Eszköz áttekintése</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/hu/category/different/" title="Különböző">Különböző</a> </li> </ul> </aside> </div> <div class="footer-widget-2 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="text-9" class="widget inner-padding widget_text"> </aside> </div> <div class="footer-widget-3 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="pages-2" class="widget inner-padding widget_pages"> <h4 class="widget-title">Oldalak</h4> <ul> <li class="page_item page-item-422"><a href="https://realbazar.ru/hu/sitemap.xml">Oldaltérkép</a></li> <li class="page_item page-item-917"><a href="https://realbazar.ru/hu/feedback/">Visszacsatolás</a></li> </ul> </aside> <aside id="text-11" class="widget inner-padding widget_text"> <h4 class="widget-title">© 2024 realbazar.ru</h4> </aside> </div> </div> </div> </div> <footer class="site-info" itemtype="http://schema.org/WPFooter" itemscope="itemscope"> <div class="inside-site-info grid-container grid-parent"> <div class="copyright-bar"> <span class="copyright">2024</span> • </div> </div> </footer> </div> <a id="scroll-to-top" href="#" title="Görgess a tetejére">Top</a> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.6'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "1" }; /* ]]> */ </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/dropdown.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation-search.min.js?ver=1.4'></script>  <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "sidebar-1", "margin_top": 10, "margin_bottom": 0, "stop_id": "footer-widgets", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['custom_html-2'] }; </script> <script type='text/javascript' src='https://realbazar.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.8.6'></script> <script type="text/javascript">  </script><br> <br> </body> </html>