file标签样式修改

1、

这是默认的file样式,无法修改,在网页中用它感觉非常不合群,大部分修改的办法就是把它隐藏,绝对定位一个文本框和一个按钮

这是修改后的样式,之后修改样式就是分别修改文本框和按钮样式了,就非常简单了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
原文地址:https://www.cnblogs.com/istianyu/p/3160284.html