飞龙博客

前端文字教程

discuz x2 css样式模拟文件上传控件css和html总结

feilong.org 修订于2011-11-14 10:14:38

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 于广州

加入收藏夹，查看更方便。

所在分类： 网站开发

新作：

旧文：