Styling the browse button...

erniegerdie · #1 07-Mar-2004, 13:40

Is there any way to style the browse button, which comes as part of the input type file.

You can change the style of a button i.e.:

CSS Code:

input[type=button] {
   ....
}

But this has no effect on the browse button, also changing the style fo input[type=file] does not make any difference.

BobbyDouglas · #2 07-Mar-2004, 13:46

Can you post the code for the browse button. Post the entire form code if you can. I will see what I can do with it.

erniegerdie · #3 07-Mar-2004, 14:02

I just want to change the style of the browse button for that tag.

So I'll just give you this:

HTML Code:


<html>
<body>
<form id='f1' name='dummyform'>
	<input type='file' name='imagefile' size='50'>
</form>
</body>
</html>

Good luck!

BobbyDouglas · #4 07-Mar-2004, 14:12

HTML Code:

<html>
<body>
<form id='f1' name='dummyform'>
  <input type='file' name='imagefile' class='input' size='50'>
</form>
</body>
</html>

For the CSS:

CSS Code:

.input{
	border:1px solid #88A0C8; 
	font-family: Arial
	font-size: 11px; 
	color: #003068; 
	text-decoration: none; 
	background-color: #E9EDF0
}

JdS · #5 07-Mar-2004, 14:22

Interesting question, definitely something to research...

erniegerdie · #6 07-Mar-2004, 14:44

Hi Bobby,

Your code will only style the text field that comes with the file tag. By the way think style should be class in your CSS code.

Its not text field that I want to style, its the actual button.

BobbyDouglas · #7 07-Mar-2004, 14:51

By the way think style should be class in your CSS code.
- Yes it should be class.

Your code will only style the text field that comes with the file tag.
- What do you want to style then? Do you want to add borders to the button? A background color? The above code will do that.

erniegerdie · #8 07-Mar-2004, 15:05

Take a look at this link:

www.thebasement.madsims.net

The code for this page is:

HTML 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='dummyform'>
  <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.

BobbyDouglas · #9 08-Mar-2004, 07:26

All I have been able to change so far:

HTML 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>

Additional information about browse buttons.

JdS · #10 08-Mar-2004, 09:20

I didn't know that you could comment with // inside CSS? I thought it was only /**/

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
radio button problem	zuzupus	MySQL / PHP Forum	1	08-Aug-2003 03:25
using a button to change table contents.	demtro	MySQL / PHP Forum	20	02-Mar-2003 15:07