类型=文件输入美化,自定义上传按钮的代码风格

在不同的浏览器中,使用输入属性所做的上传按钮是不同的:



但是输入框的样式只能添加到输入框,而这个框对上传按钮根本不起作用,那么一个超级简单的方法是用div创建你想要的上传按钮的样式,将实际的上传按钮输入设置为透明的,并将其放在集合样式的div上。

实例uff1a

HTML的一部分:



点击上传




CSS部分:



{。DIV1
职位:相对;
}

{格式。
宽度:100px;
身高:36px;
背景:# 2178fc;
颜色:# FFF;
文本对齐:中心;
行高:36px;
}

{。file_input
宽度:200px; / *因为文件输入将参加在浏览器输入框,双击可以点击上传,扩大它的位置在它之外的div。
身高:36px;
位置:绝对;
左:- 100px;
顶部:0;
Z指数:1;
-个不透明度:0;
-不透明度:0;
WebKit的不透明度:0;
不透明度:0; / * CSS属性mdash;mdash;混浊不透明,值0-1 * /
过滤器:α(不透明度0); / *兼容IE8和下面的过滤属性即它有很多其他的过滤器,而过滤器:α(不透明度0);兼容IE8和下面的IE浏览器(如果你的电脑是8以下的IE版本,一定的使用效果可能有一个允许的ActiveX控件,注意点击OK)。
光标:指针;
}



这就是效果。