飞龙博客

feilong.org 前端开发教程

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

飞龙更新于 2011-11-14 10:14 加入书签 CTRL+D 有 208 个朋友来过

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:			<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,如下:

<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样式:

/* 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;}

你有更好的发现?请联系飞龙讨论交流。

飞龙初发:
2011-11-14 10:14
本文更新网址:
https://feilong.org/discuz-fileupload-css-html

所在目录: 网站开发

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python