2
   

Applying Style to Browse Button

 
 
Reply Sun 7 Mar, 2004 09:39 pm
Code:<html>
<head>
<style>
<!--
input{
border : 1px outset #88A0C8;
font-family: Arial
font-size: 11px;
color: #003068;
text-decoration: none;
background-color: #E9EDF0
}

//-->
</style>
</head>
<body>
<form id='f1' name='form1'>
<input type="button" value="button">
<input type="file" size="50">
</form>
</body>
</html>


Note that the look of the button changes, but the look of the browse button which is associated with the input type file does not.

I want to change the look of this browse button.
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Discussion • Score: 2 • Views: 6,144 • Replies: 6
No top replies

 
Monger
 
  1  
Reply Sun 7 Mar, 2004 09:58 pm
Hmm, defining & using a class for the file browse button works in IE, but even then only the border settings I specified were used -- the colors weren't. Hmm, I wonder if there are special style properties specific to 'input type=file' (after all there are 2 things to change there, the button & the text field).

Firefox didn't seem to apply anything from my CSS class to the file button.
0 Replies
 
BobbyDouglas
 
  1  
Reply Sun 7 Mar, 2004 10:28 pm
Yea man, im stumped on this one.
0 Replies
 
Monger
 
  1  
Reply Mon 8 Mar, 2004 02:17 am
I've looked into it. For the browse button the only styling you can change using CSS is the button border (as I mentioned earlier) & the height. The changes work with IE, but might not work with other browsers.

You can't change the text, background color, or anything else. Just the border & height.

Here's sample code you can use (it might be close enough to the effect you're after to get away with it):

Code:<html>
<head>
<style>
<!--
input{
border : 1px outset #88A0C8;
//plus whatever else you want styled
}
.uploadbox{
border : 1px outset #88A0C8;
height: 17px; //change to whatever size you prefer
}
//-->
</style>
</head>
<body>
<form id='f1' name='form1'>
<input type="button" value="button">
<input type="file" class="uploadbox" size="50">
</form>
</body>
</html>


There's some additional info which might be helpful at this page: www.cs.tut.fi/~jkorpela/forms/file.html#present
0 Replies
 
BobbyDouglas
 
  1  
Reply Mon 8 Mar, 2004 11:32 am
I didnt know // were legal to use for comments in CSS.

Thanks for the code though. I have asked around a few other people, maybe they have a trick in mind.
0 Replies
 
Monger
 
  1  
Reply Tue 9 Mar, 2004 08:10 am
Good luck, but I doubt you'll find any better solution that works with the current crop of browsers.

BobbyDouglas wrote:
I didnt know // were legal to use for comments in CSS.

You were already using // in your CSS, commenting out the html "-->" end comment tag. Wink
0 Replies
 
rajammu
 
  1  
Reply Thu 29 Apr, 2004 02:18 am
one of our clients in USA having problem in accessing the site through AOL. When customer tries to login receives an error: "Error.Javanet.Socket.Exception.Connect.Code 10022. Can any one help me with an answe for this problem...this is urgent please...
0 Replies
 
 

Related Topics

Webdevelopment and hosting - Question by harisit2005
Showing an Ico File - Discussion by Brandon9000
how to earn money in internet - Discussion by rizwanaraj
The version 10 bug. Worse then Y2K! - Discussion by Nick Ashley
CSS Border style colors - Question by meesa
There is no Wisdom in Crowds - Discussion by ebrown p
THANK YOU CRAVEN AND NICK!!! - Discussion by dagmaraka
I'm the developer - Discussion by Nick Ashley
 
  1. Forums
  2. » Applying Style to Browse Button
Copyright © 2024 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 07/25/2024 at 09:27:13