Styling File Selectors
Posted: 06 September 2007 11:19 AM   [ Ignore ]
Jr. Member
RankRank
Total Posts:  38
Joined  2007-09-03

By and large one can use CSS to change the appearance of most HTML form controls - by and large. The one major exception is the

<input type="file"

control used to allow the user to select files for upload to a server. The block on styling this control is deliberate - the idea is to guard against a user accidentally giving away valueable personal information by uploading a file because he/she did not realize that this was being done owing to an upload control that had been styled out of all recognition.

Personally, I feel this is something of an exaggeration.  The complete lack of styling over this control is quite galling - you can make a really pretty looking web page only to see it ruined by a file selector box that looks like it just stepped out of 1992.

Here is a way to get round the problem

http://www.explainth.at/en/html/fileupstyle.shtml

The technique requires Javascript to be enabled on the browser.  Enjoy!

Profile
 
 
Posted: 29 April 2010 03:41 PM   [ Ignore ]   [ # 1 ]
Sr. Member
RankRankRankRank
Total Posts:  139
Joined  2010-04-23

This is a great tutorial. This never really occurred to me.
____________________
sudoku - social - puppies

Profile
 
 
Posted: 07 May 2010 12:38 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  1
Joined  2010-05-07

When the user clicks on what he/she believes to be the browse button the click is actually received by the default file input control button that lies above but is invisible because of the opacity setting.

Jeep J20 Truck Parts

Profile
 
 
Posted: 11 May 2010 06:02 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  4
Joined  2010-05-11

Personally, I feel this is something of an exaggeration.  The complete lack of styling over this control is quite galling - you can make a really pretty looking web page only to see it ruined by a file selector box that looks like it just stepped out of 1992.

____________________
ed hardy jeans ed hardy hoodies ed hardy shoes ed hardy bags

Profile
 
 
Posted: 10 June 2010 06:13 AM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  12
Joined  2010-05-09

I suppose that why there are multiple different ways to accomplish something & the outcome & details depend on the individual desires.  So, if you don’t like one approach, try & use a different approach.

weight loss product
fat loss diet
need to lose weight

Profile
 
 
Posted: 28 September 2010 08:06 AM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  4
Joined  2010-09-28

hi…

this is my current button according to my theam….

and ultimately you also should use according to your theam

but this will help you to design ....

.Button
      {
      border:groove inset 1px #000000;
      background:#84B0DC;
      filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=’#84B0DC’,endColorstr=’#ffffff’, gradientType=‘0’)progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=’#8b9b99’, Positive=‘true’);
      color:black;
      font-family: Comic Sans MS;
      font-size: 8pt;
      font-weight:bold;

    }

  All The Best…by (Participant)

3d ds games

Profile
 
 
Posted: 25 December 2010 10:05 PM   [ Ignore ]   [ # 6 ]
Newbie
Rank
Total Posts:  1
Joined  2010-12-25

really good! helped me a lot! thanks
seguro ns

Profile