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>

巴特西

file标签样式修改

最新文章

热门文章