[html] geen style voor bladeren-knop ?

[whitehouse]

ik heb de zoek functie geprobeerd, maar deze werkt nog steeds niet .. vandaar hier dus de vraag...

ik heb hier een knop in een form voor het selecteren van een bestand :

code:

<td><input name="afbeelding" type="file" id="afbeelding"  style='color:white;
 border-color:white; border-width:1px; background-color:#4E556F'></td>

nu werkt de style niet op de knop, maar alleen op het invoerveld van de knop ...
ook met css lukt het niet om deze knop een kleurtje te geven .. hoe kan dat ?

mijn css :

code:

<style type="text/css">
<!--
input {
    color: #FFFFFF;
    border-color:white; 
    border-width:1px; 
    background-color:#4E556F;
}
-->
</style>

heeft iemand een idee ?

[Hangloozz]

ja ik heb een idee:
checkboxes, radiobuttons, dropdownboxes en file-inputs zijn door het besturingssysteem gerenderde objecten.
vandaar dat stylekenmerken geen of weinig invloed hebben op deze elementen.

[[eNeRGy]]

Het enige alternatief (zover mij bekend) is zelf deze objecten nabouwen m.b.v. js + DOM.

Enige kennis vereist, en je hebt een browser met fatsoenlijke DOM support nodig (dus geen opera, ns4, ie4).

[whitehouse]

maar tis niet netjes...
alle andere knoppen (submit e.d) kun je gewoon aanpassen.. maar net die ene niet ..

[André]

Ik heb even wat geprobeerd maar het lukt inderdaad niet. Misschien kun je een andere knop erover heen plaatsen, en als die dan aangeklikt word ervoor zorgen dat de originele knop ingedrukt word.

[crisp]

whitehouse schreef op 11 augustus 2002 @ 12:56:
maar tis niet netjes...
alle andere knoppen (submit e.d) kun je gewoon aanpassen.. maar net die ene niet ..

Dit is express zo gedaan om duidelijk te maken aan de gebruiker dat met deze control files ge-upload kunnen worden wat een eventuele security risk inhoud. Daarom is besloten dat de knop niet aangepast mag worden. Vraag me verder niet wat daar weer de gedachtewijze achter is, maar daar komt het op neer.

Het is echter voor IE wel op te lossen
Hoe vraag je je dan af? Welnu, je maakt een gewone input type="text", met daarnaast een gewone input type="button" die je dus gewoon netjes kan stylen.
Vervolgens zet je daar je input type="file" naast met een style="display:none".
Je zorgt dan dat je bij het klikken op de gewone button de click() method van de file-input aanroept, en onChange van je fileinput vul je je gewone input weer:

code:

<form name="uploadform">
  <input name="uploadfile_name" type="text" style="width:100px"></input>
  <input name="uploadfile_select" type="button" value="Browse" onMouseDown="document.forms['uploadform'].elements['uploadfile'].click()"></input>
  <input name="uploadfile" type="file" style="display:none" onChange="document.forms['uploadform'].elements['uploadfile_name'].value=this.value"></input>
</form>

Dit werkt dus niet in Mozilla omdat die de click() method van een form-element niet ondersteund. Opera weet ik niet...

[De-Fault]

haha, dat is even een belachelijk ranzige methode! ik zou het maar voor lief nemen dat de meeste browsers geen style geven aan een fileselect box.

Nu sluit je ook alle niet-ie users buiten!

[whitehouse]

ja .. maar dat maakt niet uit .. dit systeem is voor een IE gebruiker ..en als hij IE nog niet gebruikt .. nou ..dan NU wel

[crisp]

JorisSt schreef op 11 augustus 2002 @ 13:20:
haha, dat is even een belachelijk ranzige methode! ik zou het maar voor lief nemen dat de meeste browsers geen style geven aan een fileselect box.

Nu sluit je ook alle niet-ie users buiten!

Dat het ranzig is geef ik toe, dat het 'belachelijk' is ben ik niet met je eens.
Ten eerste geef ik volledige informatie (dat het niet werkt in Mozilla, en zelfs waarom niet), en ten tweede beantwoord ik hiermee gewoon de vraag van topicstarter.
Met deze informatie kan je heel goed een alternatieve manier inbouwen voor niet-IE gebruikers (gewoon de text en button-input hiden, en de gewone file-input laten zien), dus je conclusie is voorbarig.
En waarom zou je als designer bepaalde dingen gewoon voor lief moeten nemen? Dat vind ik pas kortzichtig; een beetje creativiteit vind ik niet verkeerd zolang het voor de gebruiker maar duidelijk is wat er gebeurd.
Ik ben zelf van mening dat de argumentatie voor niet kunnen stylen van een file-select zwak is.

[whitehouse]

yeah .. go on ..

[DizzyWeb]

Als je de border aanpast, en op 1px en solid zet oid, dan werkt dat wel... Is de button ook meteen zijn uiterlijk vanuit het OS kwijt.

Als ze dat hadden willen doen, hadden ze het goed moeten doen.

[whitehouse]

border van mijn code ? of de code van crisp?

[crisp]

DizzyWeb schreef op 11 augustus 2002 @ 13:53:
Als je de border aanpast, en op 1px en solid zet oid, dan werkt dat wel... Is de button ook meteen zijn uiterlijk vanuit het OS kwijt.

Als ze dat hadden willen doen, hadden ze het goed moeten doen.

Ja, de border kan je aanpassen in IE, maar de background-color bijvoorbeeld niet (de browse-button doet dan bijvoorbeeld niet mee). Ook kan je de text op de button niet aanpassen. Al met al kan dat natuurlijk gewoon een lelijk effect geven in je design...

[Verwijderd]

Die oplossing van Crisp is idd heel handig, MAAR! Het bestand wordt niet geupload wanneer type=file op display:none; of visibility:hidden; staat, dit vanwege security .

Ik heb dit een keer opgelost door type=file absoluut te positioneren boven een gewone knop, en de type=file met de alpha filter onzichtbaar te maken (filter:alpha(opacity=0);). Dan denkt men dus dat ze op de gewone knop klikken, maar in werkelijkheid klikken ze op de type=file button

[crisp]

Verwijderd schreef op 11 augustus 2002 @ 14:52:
Die oplossing van Crisp is idd heel handig, MAAR! Het bestand wordt niet geupload wanneer type=file op display:none; of visibility:hidden; staat, dit vanwege security .

Ik heb dit een keer opgelost door type=file absoluut te positioneren boven een gewone knop, en de type=file met de alpha filter onzichtbaar te maken (filter:alpha(opacity=0);). Dan denkt men dus dat ze op de gewone knop klikken, maar in werkelijkheid klikken ze op de type=file button

Ja, is heel goed mogelijk. Ik heb het ooit zo eens toegepast omdat ik alleen maar een bestandsnaam nodig had, en de file zelf dus niet geupload hoefde te worden.
Je kan 'm trouwens ook in een <div> stoppen met een hoogte en breedte van 0.
Ik ga eens even kijken of dat met dat divje eroverheen wel werkt in Mozilla...

[crisp]

Ik heb een voorbeeldje dat werkt in Mozilla (alleen weer niet in IE maar goed): http://www.crisp.demon.nl/browsebutton.html
In IE staat de text-input 1 pixel te ver naar beneden, en zorgt de onClick in de button ervoor dat er geen browse-venster verschijnt; in Mozilla is deze echter nodig omdat anders de focus op de file-input blijft staan.
Een beetje knutselen dus om het in beide browsers te laten werken, maar wel weer een aanwinst voor de GoT Tracker waar Mozilla-gebruikers het tot nog toe zonder browse-linkje moesten doen voor het selecteren van een achtergrond of geluidje

Opera vind geen enkele oplossing leuk....

[Verwijderd]

Ah, das mooi! Als trouwe gebruiker van de Got Tracker

Ik heb nog ff in MSIE gekeken met wat je zei in een DIVje zetten met afmetingen 0px. Maar zodra je met de click() werkt in MSIE, wil hij het bestand niet meer uploaden. Mensen moet dus echt op browse... klikken, wil MSIE het bestand ook uploaden. En daar hebben we dan die fijne filters voor uitgevonden

offtopic:
Had je dat idee van click() misschien hier vandaan?

[crisp]

Verwijderd schreef op 11 augustus 2002 @ 16:11:

offtopic:
Had je dat idee van click() misschien hier vandaan?

Nou, nee; de GoT Tracker heeft het namelijk al langer (voor IE dan). Het uitproberen van de click() method was gewoon het eerste wat in me opkwam toen ik er achter kwam dat een type="file" niet volledig te stylen was.
De filters erop loslaten was ik echter zelf nog niet opgekomen

[crisp]

Het is gelukt om het in te bakken in de GoT Tracker! Weer een IE-only feature minder
Tip: dir="rtl" toevoegen aan de input in Mozilla zorgt ervoor dat de knop links staat, waardoor het makkelijker is om het met een divje ergens overheen te positioneren

[Verwijderd]

Hé, maar dat is slim En ik maar moeilijk doen Bedankt

[crisp]

Verwijderd schreef op 11 augustus 2002 @ 23:25:
Hé, maar dat is slim En ik maar moeilijk doen Bedankt

Oh ja, vergeten te zeggen: werkt niet in IE (maar daar zijn dus andere mogelijkheden voor)