重新定义input[type=file]的样式的例子

2016-03-02    编辑:kp878     点击(
input样式在html是固定的一个表单风格样式了,它是非常的难看了,如果你希望他好看一些我们可以进行一些处理 ,具体的例子如下。


在网页制作过程中,有时需要进行上传文件,当然如果需要上传的是图片也是属于文件的。

默认的

<input type=”file” />

的样式如下:

捕获

而我们希望使用一张图片代替,点击即可实现上传文件的功能。

希望改成的样式如下:

捕12获

首先,难点是:

1、不同浏览器的样式表现不同。
2、文字如果只用click这样的方式是不可以的。
3、input 上的文字是没有办法更改的。

实现的想法是:把input 放在图片的上边,弄成透明的,这样在点图片时,实际是点击了input,这样就实现了文件的上传。完全使用css,也可以使用js。

html:


<div class="upload-img">
<input type="file" class="comment-pic-upd" />
<img src="images/upload-pic.png" alt="上传照片" title="">
</div>
css:

.upload-img{
position: relative;
float: right;
margin: 7px 20px 0 0;
overflow: hidden;
}
.upload-img img{
width: 58px;
height: 58px;
 
}
 
.comment-pic-upd{
position: absolute;
top: 0;
left: 0;
 
z-index: 100;
width: 58px;
height: 58px;
 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity:0;
background: none;
border: none;
cursor: pointer;
}


再看一种风格的例子


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
  <form action="" method="post" enctype="multipart/form-data">
 <input type='text' name='textfield' id='textfield' class='txt' /> 
 <input type='button' class='btn' value='浏览...' />
    <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
 <input type="submit" name="submit" class="btn" value="上传" />
  </form>
</div>
</body>
</html>

效果如下

点击查看原图

 

例子三,input上传按钮美化

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

代码如下:

DOM结构:

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">点击这里上传文件
</a>

<a href="javascript:;" class="file">选择文件
    <input type="file" name="" id="">
</a>
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;
}


修改后如下:

enter image description here

 

样式二:

 

enter image description here