JavaScript CSS修改学习第五章：给“上传”添加样式

核心提示：问题 在一个网站中可能我的输入框式下面这样的：设计者可能想让上传部分也像这样然后再添加一个select按钮，但是当我想把普通的输入框改为上传框时就根本不能工作，JavaScript CSS修改学习第五章：给“上传”添加样式，浏览器之间有很大的不同，给默认按钮添加样式也几乎不可能，添加一个普通的<input>

问题

在一个网站中可能我的输入框式下面这样的：

设计者可能想让上传部分也像这样然后再添加一个select按钮。但是当我想把普通的输入框改为上传框时就根本不能工作。浏览器之间有很大的不同，给默认按钮添加样式也几乎不可能。

这很难成为设计的很好的上传框，但是也是我们能做的最多的了。

注意到Safari的设计有些不同。Safari小组想关闭手动输入文件的功能，可能担心这样的溢出。这样设计有个缺点就是用户在选择了一个文件之后不能取消上传文件。

解决办法

读者Michael McGrady发明了一个不错的小技巧来解决给上传按钮添加样式的问题。这个页面上的所有解决办法都是他发明的，我只是添加了position:relative，一些注释和测试，然后转为JavaScript。

没有使用这个技巧的时候：

使用了之后我想成为这样：

现在看起来好多了不是么？

McGrady的方法很简单且优雅：

1、设置一个普通的<input type="file">，然后放置在包含postion:relative属性的元素中。

2、同样在父元素中，添加一个普通的<input>和一个图片，给他们设置样式。给他设置绝对位置让这个普通的input能够和<input type="file">重叠。

编缉推荐阅读以下文章

• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第三章：修改样式表
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表