不知道大家有没有这种困扰， 在制作网页时，遇到要上传档案的部分， 总会觉得那个上传档案的表单（<input type="file">）实在不是挺好看。 虽然 IE 中的这个部分可以使用 CSS 改变， 但是 MSIE 以外的浏览器就几乎无法支援。 如果今天是对於要制作，支援各家浏览器的网页， 那麽单用 CSS 就无法改善所有的情况， 毕竟现在使用 FireFox/Mozilla 也越来越多了。 小弟也曾经试过利用一般的 button 的 onClick 来触发隐藏起来（display="none"）的 <input type="file">。 但是很遗憾，MSIE 以外的浏览器基於安全考量， 也几乎无法以 javascript 使用物件的 click()。 不过今天小弟误打误撞找到一个他人提供的解决的技术， 於是上来和大家分享一下。 （其实比较担心大家都已经知道了然後看小弟在这里耍笨… orz） --------------------- 以下正文线 -------------------- 如果说这个不屌的话，那真的没什麽屌了… http://www.quirksmode.org/dom/inputfile.html For MSIE 以外的档案上传修饰。 自己测试成功的修改过的内容： test.php --------------------- <style type="text/css" media="all"> div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } input.file { position: relative; text-align: left; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } </style> <div class="fileinputs"> <input size="16" type="file" class="file" onChange="document.getElementById('filepath').value = this.value;"> <div class="fakefile"> <input size="16" id="filepath"> <input size="4" type="button" value="上传"> </div> </div> --------------------- 以上正文线 -------------------- 另：网页中的 input.file CSS 是使用 text-align: right;， 但小弟以 FireFox 测试过後，原本被隐藏起来的上传按钮会漂流到 视窗的最右边，所以小弟改成 text-align: left; --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 163.13.128.240