file样式化

来源：互联网发布：复杂网络理论百度百科编辑：程序博客网时间：2024/06/17 03:11

大部分修改的办法就是把它隐藏，绝对定位一个文本框和一个按钮这是修改后的样式,之后修改样式就是分别修改文本框和按钮样式了，就非常简单了，具体代码如下2

另外还有一种办法我们可以把file的背景颜色去掉，position=absolute,z-index=-1，这样隐去file,然后用label 标签里边加上文字，设置样式，具体代码如下1

<strong> 1 </strong>    <pre style="margin-top: 0px; margin-bottom: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; line-height: 18px; font-family: 'Courier New' !important;"><span style="font-family: Arial, Helvetica, sans-serif;"><div style="margin-bottom:20px;"></span>

<span style="display:inline-block;position:relative;width:100px; height:32px; border:1px solid #ccc;border-radius:4px;text-align:center;line-height:32px;background-image:-moz-linear-gradient(top,#fff,#EAEAEA);background-image:-webkit-gradient(linear,left top,left bottom, color-stop(0,#fff),color-stop(1,#EAEAEA)); "> 嵌入LOGO <input style="height:32px;position:absolute;z-index:1;left:0px;width:100px;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer;" type="file" class="upload_file1" id="p1" name="p1" size="1" onchange="ajaxUploadFile(this, '&p=1&prefix=1');"> </span> <span>(支持jpg、png、小于2M)</span> </div>

<pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;"><strong>2</strong></span>

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div style="float: left"> <input id="fileUrl" name="type" type="text" class="td_input" /></div><div style="float: left; margin-left:10px;"> <div id="btnChose"><input type="button" value="浏览..." style=" border:#666 solid 1px;background:#fff"/></div></div><div style="position:absolute;filter:alpha(opacity=1); -moz-opacity:.0; opacity:0.0;"> <input type="file" id="file" onmouseover="this.style.cursor='pointer'" onchange="document.getElementById('fileUrl').value=this.value" style="" /></div></body></html>

0 0