05月14, 2012

CSS美化 input type=”file”(续)

这里的续,是续小强之前写的一篇博客《CSS美化 input type=”file”》

前段时间开发一个功能,点击按钮选择文件后上传。之前的版本是用flash做的,用的swfupload组件。

后来决定用html5的拖拽功能开发一套无flash的上传。当然得用input[type=file]标签了。这里就有了小强提到的“form表单家族中的 upload field 在……各个浏览器下的表现层次不齐”问题。而且为了与flash版本一致,我们的选择按钮也只能是那个蓝色的button,不能显示默认的上传按钮。有幸看过小强的这篇文章,模仿做了一个,发现以下两个问题:

  1. 鼠标样式无法控制。小强文章里也有提及;
  2. 使用的标签太多,不够“清爽”(本人很讨厌过多的标签使用和标签太深的嵌套)。当然,使用多少标签还跟实际场景有关;

第二个问题简单些。分析小强的例子,首先input是必须的,它的css属性opacity设为0,即为透明;然后把它放到一个父标签内。我这里用的是a,因为我需要鼠标移上去之后按钮有变化。所以只用了两层标签:

<a href="javascript:;" class="upload-select-btn">
    <input id="uploadMulSel" type="file" multiple/>
</a>

第一个问题稍微麻烦些。上面代码里,input会被设为透明,盖在a标签上面,鼠标样式显示的是input的定义。比如,我们设置鼠标样式cursor:move(产品里pointer更常用些),在不同浏览器里显示效果如下:

webkit: 蓝色框内的文字鼠标移上去是move样式,点击之后显示文件选择窗口;红色框内的按钮样式却还是默认的箭头。

firefox: 蓝色框内按钮部分鼠标移上去显示move样式,点击之后显示文件选择窗口;红色框内文件名显示区,鼠标移上去是text样式。

ie: 蓝色框内按钮部分鼠标移上去显示move样式,点击之后显示文件选择窗口;红色框内文件名显示区,鼠标样式为move,但点击之后没有效果。

opera这里很“搞笑”,下面再说。 可以发现,input file在这些浏览器里的表现,都有一部分是符合我们要求的:即显示为我们需要的鼠标样式,又可以正常打开选择文件窗口。那我们还能怎么办?裁剪呗。

外层a元素,设置它的高、宽,overflow设置为hidden。它的高宽是比里面的input要小的。这样,input只能有部分显示出来,其它部分就看不到了,即“裁”掉了。

然后通过设置input的left和top属性移动它,使符合我们要求(即蓝色框内部分)移动到a标签视口内,可以被我们看到,其它部分隐藏。 下面是我的css代码:

#uploadMulSel{
    opacity: 0;
    filter:alpha(opacity=0);
    cursor: move;
    display: block;
    height: 40px;
    position: absolute;
    width: 320px;

    font-size: 30px;
    left: -170px;
    top: -8px;
}
@-moz-document url-prefix() { #uploadMulSel{
    left: -355px;
    width: 190px;
}
}

.upload-select-btn{
    background: url(cmd-upload.png) no-repeat;
    width: 73px;
    height: 26px;
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
    outline: none;

    position: relative;
}
.upload-select-btn:hover{
    background-position: 0 -28px;
}
.upload-select-btn:active{
    background-position: 0 -56px;
}

Demo地址 :http://www.6poker.me/lab/upload/index.html

这里有几处需要说明的:

  1. 我使用了a标签,是因为我要在ie下支持鼠标移动上后按钮变化;
  2. 此demo在opera下正常工作。但是单独拿一个input file设置鼠标样式,是不生效的;把它放到一个a标签内也不行。但设置了a标签的active伪类后,它就ok了,很奇怪;
  3. ie下裁的时候要多注意一点,ie的上传按钮点击之后有一个虚框,裁的时候注意把这个虚框裁掉。

本文链接:https://75team.com/post/css美化-input-typefile续.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。