Styling bemeneti fájl
Szia kedves olvasók webcodius.ru blog! Az egyik legnehezebb feladat a kódoló egy stilizálás űrlap elemek, mint a tervező látja őket. Különösen az alapértelmezett területeken, mint a kiválasztás, jelölő vagy file teljesen különböző néz különböző böngészőkben. Ez a cikk meg fogja vizsgálni, hogy a mező stílus letölteni a fájlt. hogy ugyanúgy nézett ki a legtöbb böngészőben.
Az én véleményem szerint a legjobb megoldás az lenne, hogy lezárja a beviteli mezőbe a fájltípust a címke címke. Majd elrejti a beviteli mező fájlt. és ha rákattint a címke elem lesz az úgynevezett egy fájlválasztó ablakot.
Html - beágyazása mező be az állományt ebben az esetben a következő lenne:
Ezután arra kérjük a CSS stílusokat mi elemek:
fájl-feltöltési input [type = "file"] display: none; / * elrejtése a bemeneti fájl * /
>
/ * Stílus fájl kiválasztó gomb * /
.fájlfeltöltés position: relative;
overflow: hidden;
szélesség: 250 képpont;
magasság: 40px;
háttér: # 4169E1;
border-radius: 10px;
szín: #fff;
text-align: center;
>
.fájlfeltöltés: hover háttér: # 1E90FF;
>
/ * Stretch címke az egész régió .file feltölteni a blokk * /
.fájlfeltöltés címke display: block;
pozíció: abszolút;
top: 0;
bal: 0;
szélesség: 100%;
magasság: 100%;
kurzor: pointer;
>
/ * Style szövegének a gomb * /
.fájlfeltöltés span line-height: 40px;
font-weight: Bold;
>
A legtöbb CSS szabályok az osztály .file feltölteni lehet változtatni, hogy megfeleljen az Ön igényeinek (például háttér, border-radius, szín, szélesség és magasság), mivel ezek elsősorban felelős a megjelenését a fájl kiválasztó gombot.
Ennek eredményeként, a böngésző ablakot, azt látjuk, egy stilizált fájlválasztó gombot, hogy rákattint egy fájlválasztó ablak jelenik meg:
Először adjon hozzá egy html-kódot kiegészítő eleme egy div elem megjelenítéséhez a nevét a letöltött fájlt, és adjunk hozzá egy felvezető OnChange eseményt:
funkció getFileName () var fájl = document.getElementById ( 'feltöltötte-fájl') értéket .;
file = file.replace (/ \\ / g, «/»).split („/').pop ();
. Document.getElementById ( 'fájl-neve') innerHTML = 'Fájl neve:' + fájl;
>
Az eredmény egy ilyen lehetőség mező bemeneti fájl: