欢迎光临
一个有态度、有温度的分享型博客

漂亮的文件上传控件input file css样式整理

几乎所有的网站都少不了文件上传功能,因此整理几款漂亮的文件上传控件input file 表单控件很有必要,下面是我整理的文件上传input file表单控件样式,以作备用。

代码如下:

HTML部分:

<div class="div">
    <div class="line">
        <span class="span">
            <input name="" type="text" id="viewfile" onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle" />
        </span>
        <label for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file_pre">浏览...</label>
        <input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload" />
    </div>
</div>

CSS部分:

.file { 
    position:absolute; 
    left:0; 
    width:250px; 
    top:0; 
    height:28px; 
    filter:alpha(opacity=0); 
    opacity:0; 
    cursor: pointer 
}
.file_pre { 
    float:left; 
    margin-left:8px; 
    z-index:1; 
    width:66px; 
    height:28px; 
    line-height:28px; 
    background:url(liulan.gif) 
    no-repeat 0 0; 
    text-indent:-9999px; 
    cursor: pointer 
}
.inputstyle { 
    border:1px solid #BEBEBE; 
    width:170px; 
    float:left; 
    height:23px; 
    line-height:23px; 
    background:#FFF; 
    z-index:99 
}

样式预览:

预览

代码下载:

本示例的代码下载地址:[点击这里[;

转载请注明出处:容休博客 » 漂亮的文件上传控件input file css样式整理

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址