Click to See Complete Forum and Search --> : "Browse" button???


ktsirig
October 7th, 2005, 11:12 AM
Hi all

I have been having problems regarding styling input areas, submit buttons etc.
I followed some people's advice in other forums and I managed to get it going.

Now, everything is working EXCEPT 1 : The "browse-for-a-file" button

I thought that this button, since it is coded as <input type="file" ...> would be treated like the other input elements ,such as the buttons.
BUT THIS IS NOT HAPPENING!!!!!

Even if I change, for instance, font-size = 500px, the "Browse" button and the fonts inside the input area remain the same as without styling at all...

What am I missing here?
Sorry for asking so silly staff :(

PeejAvery
October 7th, 2005, 02:03 PM
That is because the only part affected will be the textbox of the file input. You can cheat by using a hidden file input and your own button input. Tell the browse button to send a JavaScript click() to the hidden file input.

NOTE: I do not believe this works for Mozilla based browsers.

<html>
<body>

<style>
.btn{
font-style: arial;
font-size: 12px;
font-weight: normal;
color: #ffffff;
background: #bbbbbb;
</style>

<input type="file" name="browse" style="display: none;">
<input type="text" name="file" class="btn">
<input type="button" onClick="browse.click(); file.value=browse.value" value="Browse..." class="btn">

</body>
</html>