discuz x2 css样式模拟文件上传控件css和html总结
feilong.org 修订于2011-11-14 10:14:38 245 次浏览discuz x2 有现成的css样式模拟上传控件的方法，在discuz 模板文件的 common.css里面，搜索 .filebtn ，就可以找到相关的css，还有html写法提示呢。不过飞龙发现它的举例没有包括上传控件的“左边文本框”，这未免美中不足。因此飞龙css总结一下discuz x2 css样式模拟上传控件的css和html，希望对你有用。本日志修订地址：http://feilong.org/discuz-fileupload-css-html
1、先上discuz默认的上传控件相关的css，如下，common.css里面，有sample举例。
/*
Name: mod_filebtn
Level: Global
Sample:
Explain: 模拟 ，注意不要让 button 太宽
Last Modify: Pony
*/
.filebtn { position: relative; margin: 0 auto; width: 60px; overflow: hidden; }
.filebtn .pf { position: absolute; right: 0; height: 23px; opacity: 0; filter:alpha(opacity=0); }
.px, .pt, .ps, select { border: 1px solid; border-color: {INPUTBORDERDARKCOLOR} {INPUTBORDER} {INPUTBORDER} {INPUTBORDERDARKCOLOR}; background: {INPUTBG} url({IMGDIR}/px.png) repeat-x 0 0; color: {TEXT}; }
.px, .pt { padding: 2px 4px; line-height: 17px; }
.px { height: 17px;padding: 2px 4px; line-height: 17px; }
2、再上带左边文本框的文件上传控件（fileupload）的html，如下：
只能上传.mp3文件
3、最后，第1步的css样式不够用，补上那些修补的的css样式：
/* fix for txt btn fileup button css style */
.filebtnfix{width:300px !important;float:left !important;}
.filebtn pffix{font-size:50px !important;}
.filebtn pxfix{width: 230px !important;}
你有更好的发现？请联系飞龙讨论交流。
更新网址：https://feilong.org/discuz-fileupload-css-html
最初发布：20111114 10:14:38 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发
