Offset címke szerepet játszik helyőrzőjére az input és textarea elem

Ön valószínűleg látta a hatást a jelen cikkben tárgyalt. Például, van egy szöveges mező, és ennek megfelelően ez a szöveg-helykitöltő van jelen. Amikor a felhasználó rákattint a szövegmezőbe helyőrzővel régió eltolódik az alsó (vagy él) a szöveg mezőbe. Véleményem meglehetősen kényelmes gyakorlat; Brad Frost írt részletes cikket róla.

Íme egy lehetséges megvalósítás:

Természetesen a nest.com offset (megváltoztatni a szöveges és vizuális elem címke) végrehajtani. Használata tudtuk js, hogy végre egy sima mozgást, de a mi feladatunk az, hogy végre minden tiszta CSS.

Ez a technika alapja a következő: az elem címke egy ál helykitöltő „om.

megjegyzés

Legalább két oka használja ezt a technikát:

• Lehetőség, hogy helyet. Mivel a címke és a bemeneti egyesítjük, helytakarékos. Ha a mező a középpontban, címke látható marad a megfelelő elhelyezése.
• Golf olyan mint egy nagy gombot. Mint tudja, az attribútumokat a címkén és id terén lehetővé teszi számunkra, hogy csatlakozzon az elemek, de annál többet lehet frissíteni a link segítségével egy nagy téglalapot. A téglalap és kérte, hogy töltse ki a mezőt, és kattintson a gombra.

Trick 1 - label helyettesíti a helykitöltő

Ott Div. amely tartalmazza a címke és a bemeneti (amelyre szüksége van minden esetben, mivel a címke és a bemeneti kell a tömb elemei). Div használt relatív elhelyezése. Mivel a relatív helymeghatározás, akkor feltétlenül helyezze el a címkét és a beviteli mezőbe a div. Ha tegyük a doboz tetején egy átlátszó háttérrel, akkor is látni a címkét közvetlenül a mező alatt, még akkor is, ha rákattint a pályán.

Trick 2 - pszeudo-osztály: fókusz és ápolási cselszövő

Az, hogy a címke és a bemeneti helyét nem számít, mert szemantikailag keresztül csatlakozik attribútum. De ha helyezze az első területen, akkor lehet használni pszeudo: fókusz és ápolási cselszövő (+), így tudjuk rendelni stílus címke elem a hangsúly a területen.

A címkén nyugodtan tedd, amit akarsz. Az én például címke (hangsúly a szurok) alján a blokk és a relatív jobb oldalán az egység.

Trick 3 - pseudo: érvényes vagy érvényesítési

Ha a mező ki van töltve, és elvesztette a fókuszt, furcsa lenne, ebben az esetben hagyja szöveges címkét. Szerencsére vannak CSS pszeudo érvényes. amely ellenőrzi a mezők az űrlap megfelelő (típus). Például egy négyzetet is köti, és a jelenléte benne a szöveg, akkor:

Ne feledje, hogy a szöveg a címke elem látható abból a tényből, hogy a bemeneti átlátszó háttérrel. Hogy elrejtse a címkét. elegendő a háttér a bemenet:

A többi kód befolyásolja a design elemek.