java 按钮的美化_CSS input按钮样式美化，input上传按钮美化教程

思路：

input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

代码如下：

DOM结构：

点击这里上传文件选择文件    

CSS样式1：/*a  upload */.a-upload {

padding: 4px 10px;

height: 20px;

line-height: 20px;

position: relative;

cursor: pointer;

color: #888;

background: #fafafa;

border: 1px solid #ddd;

border-radius: 4px;

overflow: hidden;

display: inline-block;

*display: inline;

*zoom: 1}.a-upload  input {

position: absolute;

font-size: 100px;

right: 0;

top: 0;

opacity: 0;

filter: alpha(opacity=0);

cursor: pointer}.a-upload:hover {

color: #444;

background: #eee;

border-color: #ccc;

text-decoration: none}

样式2：.file {

position: relative;

display: inline-block;

background: #D0EEFF;

border: 1px solid #99D3F5;

border-radius: 4px;

padding: 4px 12px;

overflow: hidden;

color: #1E88C7;

text-decoration: none;

text-indent: 0;

line-height: 20px;}.file input {

position: absolute;

font-size: 100px;

right: 0;

top: 0;

opacity: 0;}.file:hover {

background: #AADFFD;

border-color: #78C3F3;

color: #004974;

text-decoration: none;}

修改后如下：

样式二：

备注：对于HTML5之input:file，还可以控制上传的类型的，但是这个是html5的，低版本浏览器不支持，详情请看：HTML5的 input:file上传类型控制，html5手机上传图片调用API。

美化后显示文件名

上面美化，把默认显示的文件名也给隐藏掉了，那么如何显示文件名称呢？没关系，我们可以用jquery来获取文件的文件名。

我们可以写个change事件$(".a-upload").on("change","input[type='file']",function(){

var filePath=$(this).val();

if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){

$(".fileerrorTip").html("").hide();

var arr=filePath.split('\\');

var fileName=arr[arr.length-1];

$(".showFileName").html(fileName);

}else{

$(".showFileName").html("");

$(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();

return false

}}

浏览器启用弹出窗口过滤功能，将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了！

郑重声明：

1、本站源码仅供个人学习研究和交流使用，请于下载后二十四小时内删除

2、本站大多资源来源于互联网、用户分享，仅供学习交流使用，本站不提供任何技术支持

3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。

4、如侵犯到任何版权问题，请立即告知本站(立即在线告知)，本站将及时删除并致以最深的歉意