html 选择文件框代码怎么写,表单文件选择框样式自定义示例

复制代码代码如下:

表单文件选择框样式

.uploader{

position: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-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

}

. filename{

float: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 #fff;

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%,#fafafa), 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-box-sizing:border-box;

box-sizing:border-box;

}

.button{

float:left;

height:32px;

display:inline-block;

outline:0 none;

padding