discuz x2 css样式模拟文件上传控件css和html总结
feilong.org 修订于2011-11-14 10:14:38 521 次浏览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举例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* Name: mod_filebtn Level: Global Sample: <div class="filebtn"> <input type="file" class="pf cur1" size="1" /> <button type="button" class="pn pnc"><strong>{lang}</strong></button> </div> Explain: 模拟 <input type="file" />，注意不要让 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，如下：
|
1 2 3 4 5 6 |
<div class="filebtn filebtnfix"> <input type="file" onchange="musicurl.value=this.value;" name="music_file" size="1" class="pf cur1 pffix"> <input type="text" name="musicurl" class="px pxfix" value="" tabindex="1" style="width: 230px;"> <button type="button" class="pn pnc"><strong>浏览</strong></button> </div> 只能上传.mp3文件 |
3、最后，第1步的css样式不够用，补上那些修补的的css样式：
|
1 2 3 4 |
/* 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 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发