|
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
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 |
|
#2
|
|||
|
|||
|
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... |
|
#3
|
|||
|
|||
|
RE: adding styles to form elements
Oh.. I guessed so, but never thought of such a reason..
Thanks, that explains everything perfectly. =] |
|
#4
|
|||
|
|||
|
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> |
|
#5
|
|||
|
|||
|
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 |
![]() |
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > adding styles to form elements |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|