Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Codewalkers Forums > Other Technologies > Client Side Things
Reload this Page

adding styles to form elements


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rating: Thread Rating: 2 votes, 5.00 average. Display Modes
 
Unread Codewalkers Forums Sponsor:
  Warn nemesis · View nemesis's Warnings · View your Warnings · #1  
Old August 17th, 2003, 12:37 AM
nemesis nemesis is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Saint-Petersburg, Russia
Posts: 29 nemesis User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
adding styles to form elements
Hi!

Could anyone suggest a way to add style to the <input type="file"> tag? Especially the button =)
It seems that I tried everything, but maybe I'm missing something...

Thanks,
Cyril
Reply With Quote
  Warn zombie · View zombie's Warnings · View your Warnings · #2  
Old August 17th, 2003, 02:44 AM
zombie zombie is offline
Codewalkers Intermediate (1500 - 1999 posts)
  
Join Date: Apr 2007
Location: serbia
Posts: 1,876 zombie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 8
RE: adding styles to form elements
you can't style file upload input field.. (or you can't stile it much..)

browsers don't allow this.. for security.. think of what could happen if some hacker on some site styled it to look NOT like the upload field... he could trick non-pro users into uploading some files...
Reply With Quote
  Warn nemesis · View nemesis's Warnings · View your Warnings · #3  
Old August 17th, 2003, 06:10 AM
nemesis nemesis is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Saint-Petersburg, Russia
Posts: 29 nemesis User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
RE: adding styles to form elements
Oh.. I guessed so, but never thought of such a reason..
Thanks, that explains everything perfectly. =]
Reply With Quote
  Warn CodeKadiya · View CodeKadiya's Warnings · View your Warnings · #4  
Old August 31st, 2003, 12:19 AM
CodeKadiya CodeKadiya is offline
Contributing User
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: Colombo,Sri Lanka
Posts: 2,330 CodeKadiya User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 50 m 36 sec
Reputation Power: 9
Send a message via Yahoo to CodeKadiya
RE: adding styles to form elements
Not much you can do to decorate file element. But, take a look this.

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #cc6695;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; }
a:hover { text-decoration: underline; color : #DD6900; }
hr { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}

.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

.forumline { background-color: #FFFFFF; border: 2px #006699 solid; }

td.row1 { background-color: #EFEFEF; }
td.row2 { background-color: #DEE3E7; }
td.row3 { background-color: #D1D7DC; }

td.rowpic {
background-color: #FFFFFF;
background-image: url(templates/subSilver/images/cellpic2.jpg);
background-repeat: repeat-y;
}

th {
color: #FFA34F; font-size: 11px; font-weight : bold;
background-color: #006699; height: 25px;
background-image: url(templates/subSilver/images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRig ht,td.catBottom {
background-image: url(templates/subSilver/images/cellpic1.gif);
background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}

td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight ,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: #D1D7DC; border: #FFFFFF; border-style: solid;
}

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

.maintitle {
font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #000000;
}

.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; }

.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #006699; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }

.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }

.forumlink { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }

.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }

.topictitle,h1,h2 { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }

.name { font-size : 11px; color : #000000;}

.postdetails { font-size : 10px; color : #000000; }

.postbody { font-size : 12px; line-height: 18px}
a.postlink:link { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}

.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}

input,textarea, select {
color : #CC6699;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
}

input.post, textarea.post, select {
background-color : #000000;
}

input { text-indent : 2px; }

input.button {
background-color : #CC6699;
color : #CC6699;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.mainoption {
background-color : #FAFAFA;
font-weight : bold;
}
input.liteoption {
background-color : #FAFAFA;
font-weight : normal;
}

.helpline { background-color: #DEE3E7; border-style: none; }

</style></head>

<body>
<input type=file>
</body>
</html>
Reply With Quote
  Warn nemesis · View nemesis's Warnings · View your Warnings · #5  
Old August 31st, 2003, 11:59 AM
nemesis nemesis is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Saint-Petersburg, Russia
Posts: 29 nemesis User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
RE: adding styles to form elements
Yeah, that solves the problem in MSIE, but apparently has no effect in Mozilla.
Unfortunately i do have to be mozilla-compartible =(

Thanks,
Cyril
Reply With Quote
  Warn huaphuoctruong · View huaphuoctruong's Warnings · View your Warnings · #6  
Old July 20th, 2012, 11:24 AM
huaphuoctruong huaphuoctruong is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Jul 2012
Posts: 7 huaphuoctruong User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 29 m 5 sec
Reputation Power: 0
In other browser you must create your custom input file by something else and you will create a file input somewhere in your side hiddenly.
Use javascript listen to your custom input file control and call to the focus() function of the hidden input type.

Another option is use flash, with it, you could display a progress bar. Or you could search about the javascript upload script, I remember there is a plugin for jQuery could do that.
Reply With Quote
  Warn jakeliu · View jakeliu's Warnings · View your Warnings · #7  
Old February 21st, 2013, 03:27 AM
jakeliu jakeliu is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Feb 2013
Posts: 1 jakeliu User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 m 44 sec
Reputation Power: 0
the problem in MSIE, but apparently has no effect in Mozilla.
Reply With Quote
Reply

Viewing: Codewalkers Forums > Other Technologies > Client Side Things > adding styles to form elements

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap