Applying Style to Browse Button

Forums: Web Development, Css
Email this Topic • Print this Page

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,122 • Replies: 6

No top replies

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

Yea man, im stumped on this one.

0 Replies

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

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

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

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

Applying Style to Browse Button

Related Topics

Quick Links

My Account

able2know