Input type=file formázása

[Warner]

az érdemi munkát igen, de css nélkül sokra nem mész vele. és mivel ez is form formázás, így sztem teljesen mindegy. bár a CSS kategóriában van

Igazából de. CSS nélkül is HTML + JS-sel megoldható a feladat, még a formázás se lesz sokkal csúnyább, csak persze sokkal kevésbé praktikus úgy. Én csak arra akartam rávilágítani, hogy a CSS ehhez a feladathoz csak pont annyira kell, mint bármilyen más formázási feladathoz. Olyan, mintha azt mondanánk, hogy egy dinamikus PHP oldal előállítás az CSS téma. Persze, biztos van benne CSS is, de az adott feladatban ott meg a PHP a domináns tényező
Ennyi. Szerintem túltárgyaltuk.

A témát ha nem gond, áthelyeztem ide

[Semmu]

az érdemi munkát igen, de css nélkül sokra nem mész vele. és mivel ez is form formázás, így sztem teljesen mindegy. bár a CSS kategóriában van

[Warner]

ezt komolyan gondoltad?

Teljesen. Az érdemi munkát JS végzi.

[Semmu]

A CSS-hez ennek elég kevés köze van

ezt komolyan gondoltad?

[Warner]

Én ezzel próbálkoztam pár hónappal ezelőtt: link

A CSS-hez ennek elég kevés köze van

[klank]

Én ezzel próbálkoztam pár hónappal ezelőtt: link

[tbence]

Nem tudom hogy próbálkoztál e már vele, de nem lehet azt olyan egyszerűen formázni. pl nem nagyon tudsz a gombnak háttérképet adni.
mert ha háttérképet adsz a cuccnak, akkor az a gomb mögötti részen fog megjelenni.
Pont azért nehéz formázni, mert a gombot és a mezőt egybe veszi. nem lehet őket külön külön formázni.
Amúgy ehhez hasonló megoldást már én is láttam.

[Suttogó]

és ez miért is jó?
Nem egyszerűbb egy sima id-t adni a file inputnak azt jónapot?

[Keveqiah]

FF és IE7 támoga'ssa.. A Cross-browser megoldás az, ha úgyhagyom ahogy van.

[Semmu]

eléggé nem cross-browser megoldás. :S

[Keveqiah]

Jó játékot.  

Kód: CSS

1. #styled_file_field
2. {
3.         width: 242px;
4.         height: 24px;
5.         background: url(upload_file.png) no-repeat top right;
6.         border: solid 0px;
7. }
8. #styled_file_field input[type=text]
9. {
10.         position: absolute;
11.         z-index: 1;
12.         margin-top: 2px;
13.         margin-left: 4px;
14.         border: 0;
15.         height: 15px;
16.         font-size: 12px;
17.         width: 145px;
18. }
19. #styled_file_field input[type=file]
20. {
21.         opacity: 0.0;
22.         -moz-opacity: 0.0;
23.         filter: alpha(opacity=00);
24. }
25.  

Kód: HTML

1. <div id="styled_file_field">
2.     <input class="input_type" type="text" id="file_value" name="file_value" />
3.         <input onchange="document.getElementById('file_value').value=this.value" type="file" id="file" name="file" />
4.         <br style="clear: both;" />
5. </div>
6.