表单文件选择框样式自定义

1、表单文件选择框样式自定义复制代码代码如下:表单文件挑选框样式bodyfont-family:arial,verdana,sans-serif; margin:100px;.uploaderposition:relative;display:inline-block;overflow:hidden;cursor:default;padding:0;margin:10px 0px;-moz-box-shadow:0px 0px 5px ddd;-webkit-box-shadow:0px 0px 5px ddd;box-shadow:0px 0px 5px ddd;-moz-border-radi

2、us:5px;-webkit-border-radius:5px;border-radius:5px;. filenamefloat:left;display:inline-block;outline:0 none;height:32px;width:180px;margin:0;padding:8px 10px;overflow:hidden;cursor:default;border:1px solid;border-right:0;font:9pt/100% arial, helvetica, sans-serif; color:777;text-shadow:1px 1px 0px f

3、ff;text-overflow:ellipsis;white-space:nowrap;-moz-border-radius:5px 0px 0px 5px;-webkit-border-radius:5px 0px 0px 5px;border-radius:5px 0px 0px 5px;background:f5f5f5;background:-moz-linear-gradient(top, fafafa 0%, eee 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,faf

4、afa), color-stop(100%,f5f5f5);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=fafafa, endcolorstr=f5f5f5,gradienttype=0);border-color:ccc;-moz-box-shadow:0px 0px 1px fff inset;-webkit-box-shadow:0px 0px 1px fff inset;box-shadow:0px 0px 1px fff inset;-moz-box-sizing:border-box;-webkit

5、-box-sizing:border-box;box-sizing:border-box;.buttonfloat:left;height:32px;display:inline-block;outline:0 none;padding:8px 12px;margin:0;cursor:pointer;border:1px solid;font:bold 9pt/100% arial, helvetica, sans-serif;-moz-border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;border-rad

6、ius:0px 5px 5px 0px;-moz-box-shadow:0px 0px 1px fff inset;-webkit-box-shadow:0px 0px 1px fff inset;box-shadow:0px 0px 1px fff inset;.uploader inputtype=fileposition:absolute;top:0; right:0; bottom:0;border:0;padding:0; margin:0;height:30px;cursor:pointer;filter:alpha(opacity=0);-moz-opacity:0;-khtml

7、-opacity: 0;opacity:0;inputtype=button:-moz-focus-innerpadding:0; border:0 none; -moz-box-sizing:content-box;inputtype=button:-webkit-focus-innerpadding:0; border:0 none; -webkit-box-sizing:content-box;inputtype=text:-moz-focus-innerpadding:0; border:0 none; -moz-box-sizing:content-box;inputtype=tex

8、t:-webkit-focus-innerpadding:0; border:0 none; -webkit-box-sizing:content-box;/* white color scheme - */.white .buttoncolor:555;text-shadow:1px 1px 0px fff;background:ddd;background:-moz-linear-gradient(top, eeeeee 0%, dddddd 100%);background:-webkit-gradient(linear, left top, left bottom, color-sto

9、p(0%,eeeeee), color-stop(100%,dddddd);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=eeeeee, endcolorstr=dddddd,gradienttype=0);border-color:ccc;.white:hover .buttonbackground:eee;background:-moz-linear-gradient(top, dddddd 0%, eeeeee 100%);background:-webkit-gradient(linear, left t

10、op, left bottom, color-stop(0%,dddddd), color-stop(100%,eeeeee);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=dddddd, endcolorstr=eeeeee,gradienttype=0);/* blue color scheme - */.blue .buttoncolor:fff;text-shadow:1px 1px 0px 09365f;background:064884;background:-moz-linear-gradient(

11、top, 3b75b4 0%, 064884 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,3b75b4), color-stop(100%,064884);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=3b75b4, endcolorstr=064884,gradienttype=0);border-color:09365f;.blue:hover .buttonbackground:3b75b4;b

12、ackground:-moz-linear-gradient(top, 064884 0%, 3b75b4 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,064884), color-stop(100%,3b75b4);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=064884, endcolorstr=3b75b4,gradienttype=0);/* green color scheme - */.

13、green .buttoncolor:fff;text-shadow:1px 1px 0px 6b7735;background:7d8f33;background:-moz-linear-gradient(top, 93aa4c 0%, 7d8f33 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,93aa4c), color-stop(100%,7d8f33);filter:progid:dximagetransform.microsoft.gradient(startcolors

14、tr=93aa4c, endcolorstr=7d8f33,gradienttype=0);border-color:6b7735;.green:hover .buttonbackground:93aa4c;background:-moz-linear-gradient(top, 7d8f33 0%, 93aa4c 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,7d8f33), color-stop(100%,93aa4c);filter:progid:dximagetransfor

15、m.microsoft.gradient(startcolorstr=7d8f33, endcolorstr=93aa4c,gradienttype=0);/* red color scheme - */.red .buttoncolor:fff;text-shadow:1px 1px 0px 7e0238;background:90013f;background:-moz-linear-gradient(top, b42364 0%, 90013f 100%);background:-webkit-gradient(linear, left top, left bottom, color-s

16、top(0%,b42364), color-stop(100%,90013f);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=b42364, endcolorstr=90013f,gradienttype=0);border-color:7e0238;.red:hover .buttonbackground:b42364;background:-moz-linear-gradient(top, 90013f 0%, b42364 100%);background:-webkit-gradient(linear,

17、left top, left bottom, color-stop(0%,90013f), color-stop(100%,b42364);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=90013f, endcolorstr=b42364,gradienttype=0);/* orange color scheme - */.orange .buttoncolor:fff;text-shadow:1px 1px 0px c04501;background:d54d01;background:-moz-linear

18、-gradient(top, f86c1f 0%, d54d01 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,f86c1f), color-stop(100%,d54d01);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=f86c1f, endcolorstr=d54d01,gradienttype=0);border-color:c04501;.orange:hover .buttonbackgro

19、und:f86c1f;background:-moz-linear-gradient(top, d54d01 0%, f86c1f 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,d54d01), color-stop(100%,f86c1f);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=d54d01, endcolorstr=f86c1f,gradienttype=0);/* black color

20、scheme - */.black .buttoncolor:fff;text-shadow:1px 1px 0px 111111;background:222222;background:-moz-linear-gradient(top, 444444 0%, 222222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,444444), color-stop(100%,222222);filter:progid:dximagetransform.microsoft.gradient(startcolorstr=444444, endcolorstr=222222,gradienttype=0);