A jelszó típusú bemenetek a kezdetektől fogva a tényleges karakterek helyett egy kis pontot (felsorolásjelet) jeleztek, hogy némi biztonságot biztosítsanak.
Bár módosíthatja a nem jelszó típusú bemeneteket a golyók használatához (csak a webkit), a jelszó típusú felsorolás módosítása kissé bonyolultabb.
Még 2015-ben találtam egy módszert, amely lehetővé tette a felsorolásjel megváltoztatását, de csak a webkit böngészőkben. Nemrégiben megnéztem ezt a munkát, és felfedeztem, hogy egy kisebb módosítás lehetővé teszi ennek a módszernek a működését a Firefox & amp; Microsoft Edge böngészők. Tehát, kezdjük!
Először is, w szükség van egy ikon betűtípus-generáló webhelyre. Fontellot használok ebben a példában; de minden olyan webhely működni fog, amely lehetővé teszi az ikon kiválasztását és a betűkészlet kódjának testreszabását.
Válasszon két különböző ikont. Ha ugyanazt az ikont szeretné használni az összes böngészőben, akkor valószínűleg szükség lesz arra, hogy – vagyis nem teszteltem – hozzá kell adnia az ikon másolatát az „Egyéni ikonok” szakaszhoz. Erre azért van szükség, mert a Fontello csak egy egyedi kódot engedélyezhet ikononként.
Most válassza a „Kódok testreszabása” fület.
A webkit böngészőket célzó ikonok esetében állítsa a célkódot U+ 2022 értékre. Ez egy gömb unicode hexadecimális értéke.
Firefox és MS Edge böngészőknél állítsa a célkódot U+ 25CF értékre. Ez egy fekete kör unicode hexadecimális értéke.
Most töltse le a webfontot.
A betűtípus mappában lévő összes betűtípust használni fogjuk. És csak a fontello.css css-jét. A CSS-t módosítani kell, mert csak a jelszó megadása fogja használni a betűtípust.
A fenti részletben az URL-ben található 0000 helyőrző. A kiválasztott Fontello ikonoktól és a rendeltetési hely kódjától függően változik. Másolhatja a fenti CSS-t, de meg kell tartania a @ font-face blokkot a fájlból. A [class ^ = & quot; ikon- & quot;]: előtte, [class * = & quot; ikon- & quot;]: mielőtt a szelektorokat input [type = & quot; jelszó & quot;] -ra cserélték. És az utolsó két meghatározást, amely content meghatározást tartalmaz, eltávolítottuk, mivel csak egy bemenetet célozunk meg.
Csatolja a CSS-t és a jelszót a HTML-be, és kész! A jelszó megadásánál az egyedi ikon jelenik meg a régi sima golyó helyett, amely korábban volt.
Ha azt szeretné, hogy működjön, nézze meg a bemutatót, majd nézze meg a GitHub demókódját.
