Custom upload button

[Niakmo]

Voor mijn mijn uploads maak ik gebruik van een custom upload button door boven op mijn custom knop een doorzichtige <input type="file"> te plaatsen. Nu wil ik graag omwille van consistentie de cursor in een handje laten veranderen zoals bij alle andere buttons op de site. Helaas ondersteund input dit niet. is dit nog met css op te lossen?

HTML:

<style>
html,body
{
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 12px;
}

#file {
    position: relative;
    margin-left: -154px;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    top: -1px;
    cursor: pointer;
}


#test {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    color: white;
    background-color: #747474;
    padding: 2px 10px 2px 10px;
    margin: 0;
    border: 1px solid #747474;
    cursor: help;
    
}

a
{
    color: white;
    text-decoration: none;
    cursor: pointer;
}

a:hover
{
    color: white;
    text-decoration: underline;
    cursor: pointer;
}

</style>


<form name="iform" action="" method="post" enctype="multipart/form-data">
    <input id="file" type="file" name="image" onChange="upload()" />
    <input type="hidden" name="imageupload" value="true">
</form>



<div id="test"><span><a href="#" class="knop">Change</a></span></div>
</body>
</html>

[NitroX infinity]

http://www.w3schools.com/css/pr_class_cursor.asp

edit:
beter lezen nitrox, dat werkt dus niet , sorry.

Wat als je een span om de input heen zet en daar de cursor van veranderd?
En wat als je in de CSS '#file' veranderd naar 'INPUT#file'?

[ Voor 78% gewijzigd door NitroX infinity op 01-04-2007 20:31 ]

[Blaise]

Ik krijg het ook niet voor elkaar met alleen CSS en ik vraag me af of het met JS zou kunnen. Zal wel met veiligheid te maken hebben. In Internet Explorer werkt het overigens wel.

Je zou eventueel ook SWFupload kunnen uitproberen, daarmee kan je met JS/Flash een uploadscherm koppelen aan een willekeurig HTML element. Het maakt gebruik van Flash. Dat is een beetje overkill als je alleen maar een cursortje wil veranderen, maar misschien spreken de andere features je ook aan. Met fallback voor browsers zonder JS/Flash.

[orf]

offtopic: Consistent is juist dat buttons geen hand-cursor hebben.

[Niakmo]

orf schreef op zondag 01 april 2007 @ 21:00:
offtopic: Consistent is juist dat buttons geen hand-cursor hebben.

Het is voor een internet applicatie waarbij alle handelingen waarbij je clickt buttons zijn dus ook links naar verschillende onderdelen enz. Deze hebben allemaal het zelfde uiterlijk en gedrag. En ik heb gekozen om de cursor in een hand te veranderen omdat toch een stuk duidelijker is voor gebruikers, ook omdat links standaard een hand krijgen.

Het tweede probleem is dat het niet mogelijk is om een hover effect te krijgen op de button dus er is geen feedback naar de gebruiker toe dat de knop clickbaar is dit allemaal omdat de input tag dit niet toelaat (onder FF).

De oplossing die ik vooralsnog als laatste redmiddel zie is een hittest met javascript, alleen lijkt me dit overkill.

Die swfupload ziet er inderdaad leuk uit maar om de hele library in dit stadium in te gaan bouwen terwijl het nu redelijk simpel is opgelost. Bij het kiezen van het bestand (zie de onChange()), wordt automatisch het bestand geupload en weergegeven. Dus het enige wat ik nu nog mis is een progresbar, maar ik heb wel een indicator die weergeeft dat hij aan het uploaden is. Dit is voorlopig voldoende.

[apokalypse]

ho last niet goed

[ Voor 88% gewijzigd door apokalypse op 01-04-2007 23:07 ]

[Niakmo]

1. is het met javascript mogelijk om de browse knop te initialiseren. Op deze manier zou ik de hele file input kunnen hiden.

2. een andere mogelijkheid is om de mouse cursur met javascript aan te passen zonder gebruik te maken van css. Helaas kan ik hier niks over vinden aangezien je normaal hiervoor.

mijnDing.style.cursor = 'pointer'; voor zou gebruiken. Maar dit werkt dus niet aangezien het een input element is.