使用CSS美化文件上传表单

ZH CEXO — Mon, 16 May 2011 09:14:33 +0000

开发webapp的朋友们应该对这样的表单元素不陌生吧，虽然我从来没接触过=_=。今天看到Mr.Think同学更新了一篇博客《利用label标签和CSS美化文件上传表单》，不过demo里面好像失效了……提到这里，我就把我知道的美化这样元素的方法分享一下吧。

DEMO在这里。

要说input[type=file]类型完全不支持CSS也不对，只是很多关于样式化的CSS方法对它无效，是出于安全的目的。不过position、z-index、opacity这些CSS属性还是支持的，所以就用这些方法来变通。

核心思想

其实我是把样式都加在了input[type=file]的父元素上了，当然你也可以使用它的兄弟元素等，根据项目的实际需要来定吧。然后用css把input[type=file]的透明度设置0。这样一来，虽然用户的眼睛不可见，但它还是存在于网页的那个地方，鼠标方面的交互也是可以做的。至于鼠标移入和移出时候的效果，就对其父元素指定hover状态和非hover状态时的样式。

另外，在上传按钮的交互上，IE和非IE系的不一样。IE里面，点击按钮前面的像文本框一样的部分是没用的，得点击“浏览”的按钮才会有窗口弹出。而在非IE里，点击框或者按钮都会有窗口弹出，所以为了解决在IE下的问题，使用position定位的时候，把按钮部分对准有样式的地方。图解一下（透明度非0时的状态）：

关键代码我也给一下：

/*设置input[type=file]父元素的样式*/
#input_file .right{
	float:left;
	width:100px;
	height:29px;
	margin-top:-6px;
	margin-left:10px;
	padding-top:4px;
	overflow:hidden;
	background:url(btn_bg.png) center top no-repeat;
	/*为子元素定位着想，使用relative*/
	position:relative;
}
/*鼠标在hover状态时样式的切换*/
#input_file .right:hover{
	background:url(btn_bg.png) center bottom no-repeat;
}
/*设置透明度，通用方法和IE专属方法*/
#input_file .right input{
	position:absolute;
	/*把浏览按钮置于交互中心，解决IE的问题*/
	right:0;
	opacity:0;
	filter:alpha(opacity=0);
}

已知问题

+ IE6不支持非标签的hover状态，所以鼠标悬浮的交互在IE6下无法实现，完美主义者请使用JS。

+ 看上图就知道，IE上鼠标点到“浏览”按钮才会有效，所以左边的框部分点了不会有选择文件的窗口弹出，与鼠标悬浮的交互效果有些不协调，并且鼠标指针的样式无法定义。

+ 更好的交互效果？更便利的定制外观？哥们，用flash吧，CSS做不到，至少我做不到……

关于DEMO

DEMO是我写的无误，设计图是国外网站上下载的，小巧的界面有点像网盘上传的界面，有需要的同学们直接拿去吧，呵呵。

15+帮你缩短URL的网站

ZH CEXO — Thu, 11 Sep 2008 15:00:58 +0000

像Twitter这样的微博客服务大家应该用过吧，在国内的话，可能饭否更方便一点，别的不说，这样的网站里面写东西是有字数限制的，如果你在网上找到了什么好玩的或者有用的东西想和你的朋友们分享，可能发一个长的链接都不行，更不用说评价些什么了，这个时候，缩短你的URL相当重要。Linxo.cn在这里向你推荐15个这样的网站，希望能够帮到你。

1. doiop

doiop是一个支持自定义关键字的URL瘦身网站，你可以把一个很长的链接地址提交给它，接着给几个简单的字母描述它作为关键字，那么这几个字母就会包含在生成的新网址里面，前提是你提供的关键字没有被他人使用过。如果自定义关键字那一栏留空，那么生成的链接地址里面是几个随机的字母。

2. TinyURL.com

TinyURL.com这个网站大家很多人都知道了，用得也最多，在网站的LOGO下面，说的是已经有一亿以上的链接被缩短，而且平均每月有15亿次的点击率，平时我用得比较多点。网站提供一段javascript代码，把它保存在浏览器书签工具栏里，以后转化方便。同doiop，也支持自定义关键字，但我定了几次都没成功，估计是我想的词都没特色，还是随机码好>_<

3. memurl

这个网站生成链接没有自定义关键字的选项，但是它生成的网址可以被跟踪，以后你再去memurl提交你生成过的网址时，它会显示链接被点击过多少次等信息，用作统计是个不错的选择。

4. is.gd

这个网站的域名比较短吧，所以它生成的地址也很短，反正我试了比TinyURL短，虽然不用搞得那么极端。

5. Jump2.net

这个网站提供多国语言版本，其中就包含有中文，但是Linxo.cn在这里看来简直就像是用翻译器汉化的，不是很准确。它的特别之处就在于可以隐藏原始链接的具体地址而仅在浏览器里显示生成的地址，和以上几个跳转网站不一样。

6. xaddr.com

这个网站提供的服务不是很爽，它并是不直接用生成的地址来跳到你想要的地方，而是先跳到它的网站，它再把原始链接提供给你，诸多不便。

7. URL.ie

由于域名短，用的人也不在多数，所以生成的链接比较短，强求字数的去试一下。

8. W3T

乍一看，看成W3C了，囧~功能不特殊，能自定义关键字而已~

9. SNIPURL

语言为繁体中文，不单提供URL瘦身功能，还可以注册，方便管理你生成的链接。网站下方还提供javascript函数代码，把代码保存为书签放在浏览器书签工具栏上，可以最快的转换你的URL，同时网站上还提供了API，可以在你的网站上使用。

10. dwarfurl

在你生成链接的时候网站允许你为你的链接加上密码，以后凭着密码和生成的链接地址就可以访问关于链接被点次数的信息，不像memurl那样是公开的。另外，网站上还提供转化功能的Firefox扩展，安装之后能迅速转化你的链接，对于使用微博客+Firefox比较多的人来说是很不错的。

11. easyURL

这个网站的域名不够短？那么它还提供其他的三个域名可供生成的网址作跳转，可以自定义关键字，可以跟踪链接的状况，不错的选择~

12. rubyurl

网站没有别的功能，但是生成链接的按钮是一个javascript做的链接，网站建议你把这个链接保存在浏览器书签工具栏里，方便以后快速转化。

13. NSFW

网站的主题词写的是，制作更短更安全的链接，但我觉得，短还可以，安全谈不上，因为生成的链接你使用的话，会先跳到NSFW的网站，然后提示说“你真要打开这个地址吗”，但是链接是否安全，它没说~

14. simpl.es

这个网站生成了链接后，只要你提供你的twitter的帐号和密码，它就会自动地在你的twitter里发一句说，“嘿，我正在看……（URL）”，只不过是英文版的。网站下面说，“我们保证，绝对不保存任何用户的隐私数据”……

15. 6.cn精巧网址

国产的，很方便，知道的人也多，我就不多说了~

结语

其实这样的网站还有很多，不过Linxo.cn测试的时候发现，其他的一些类似网站被墙了，要用TOR访问，不方便，打开的速度也慢，没什么意义。这15+，应该够你用了吧~

ZH CEXO's BLOG » web2.0