ASP.NET - how to change color of browse button in FileUpload control

Asked By chandana on 04-Jul-11 06:10 AM
Hi..
i need to change the color of browse button in file upload control
how can i do this..
pls help me..
Ravi S replied to chandana on 04-Jul-11 06:13 AM
HI

try this

<asp:FileUpload
       ID="FileUpload1"
       runat="server"
BackColor="Black"
       ForeColor="Blue"
       />

refer the link also
http://forums.asp.net/t/918896.aspx
Ravi S replied to chandana on 04-Jul-11 06:15 AM
HI

here is the good article

refer this link

http://www.quirksmode.org/dom/inputfile.html
Jitendra Faye replied to chandana on 04-Jul-11 06:16 AM

You can customize your browse button by changing the “file_input_button” css class.

html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" />
</div>

css:

.file_input_button
{
	width: 100px; 
	position: absolute; 
	top: 0px;
	background-color: #33BB00;
	color: #FFFFFF;
	border-style: solid;
}
.file_input_hidden
{
	font-size: 45px; 
	position: absolute; 
	right: 0px; 
	top: 0px; 
	opacity: 0; 
	filter: alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: 0; 
	-moz-opacity: 0;
}

screenshot:

http://lh3.ggpht.com/_H9pKG-gOXvc/S1egaE6T-OI/AAAAAAAAAL8/_OvR7H5qfc8/s1600-h/image%5B19%5D.png 

Follow this link-

http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html

Ravi S replied to chandana on 04-Jul-11 06:17 AM
HI

try this also

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" />
</div>

css:

.file_input_button
{
	width: 100px; 
	position: absolute; 
	top: 0px;
	background-color: #33BB00;
	color: #FFFFFF;
	border-style: solid;
}
.file_input_hidden
{
	font-size: 45px; 
	position: absolute; 
	right: 0px; 
	top: 0px; 
	opacity: 0; 
	filter: alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: 0; 
	-moz-opacity: 0;
}











screenshot:

http://lh3.ggpht.com/_H9pKG-gOXvc/S1egaE6T-OI/AAAAAAAAAL8/_OvR7H5qfc8/s1600-h/image%5B19%5D.png


refer the link also
http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html
d replied to chandana on 04-Jul-11 06:18 AM
<asp:FileUpload  ID="idno"   runat="server" BackColor="Red"  ForeColor="Yellow" />
or
right click in ur browse button go to properties click forecolour then change color
Reena Jain replied to chandana on 04-Jul-11 06:22 AM
Hi,

Try like this

<asp:FileUpload
  AccessKey="string"
  BackColor="color name|#dddddd"
  BorderColor="color name|#dddddd"
  id=fileup1 runat="Sever"
/>
Reena Jain replied to chandana on 04-Jul-11 06:25 AM
Hi,

From my previous post you can change the background of textbox related to fileupload, not of browse button. It is not possible to style the actual button on an file upload. I have seen a hack that uses CSS to place a "fake" style over the top of the button. here is a link that explains it better.

http://www.quirksmode.org/dom/inputfile.html

Hope  this will help you
Riley K replied to chandana on 04-Jul-11 07:02 AM
You can apply CSS for that,
<style id="cssStyle" type="text/css" media="all">
.CS
{
background-color:#abcdef;
color: Yellow;
border: 1px solid #AB00CC;
font: Verdana 10px;
padding: 1px 4px;
font-family: Palatino Linotype, Arial, Helvetica, sans-serif;

}
</style>

And
<asp:FileUpload ID="FileUpload1" CssClass="CS" runat="server" />
You can also set with the style property <input type="file" size="19" style="BORDER-RIGHT: #88a0c8 1px outset; BORDER-TOP: #88a0c8 1px outset; BORDER-LEFT: #88a0c8 1px outset; COLOR: #003068; BORDER-BOTTOM: #88a0c8 1px outset; FONT-FAMILY: Arial font-size: 11px; BACKGROUND-COLOR: #e9edf0; TEXT-DECORATION: none " > Regards