优化textarea的样式---背景图片的实现

admin

2010年4月26日 23:23 本文热度 7089

1，初始状态：

当鼠标点进去写东西的时候，如下图：

默认用了一个bg图片，在文本框获得一次焦点后把背景图片去掉了，后来再失去焦点的时候用的是第三个样式。
代码是copy下来的，图片路径修改成了绝对路径。

view source print ? 01.http://w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 02.http://w3.org/1999/xhtml" xml:lang="cn" lang="cn"> 03. 04.输入框textarea提示点击消失效果 - 时代前端 05. 06. 11. 13. 14. 15.

由时代前端收集整理 http://52shidai.com" _fcksavedurl="http://52shidai.com">http://52shidai.com/ 时代前端

16.

17.</body> 
18.</html>
<div align="right" style="color:darkgrey;font-size:12px;"><br>该文章在 2010/4/26 23:23:12 编辑过</div></div>

</div>
		</td>
		<td id="td_rightpart" class="vtclgntop">
			<div class="closely boxborder">
				
				<div class="ultitle">关键字查询</div>
				<div class="searchitem">
					
					<div><label><input type="checkbox" name="searchword" value="优化"  checked/>优化<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="实现"  checked/>实现<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="图片"  checked/>图片<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="样式" />样式<label></div>
					
					<div><label><input type="checkbox" name="searchword" value="背景" />背景<label></div>
					<input type="button" value="查询" class="button_40px" onclick="search_other_keyword()"/>
				</div>
				
				<div class="ultitle">相关文章</div>
				<div id="closely_list_area"><div style="padding:20px;text-align:center;">正在查询...</div></div>
			</div>
			<div class="fixedtop">
			<div class="gg ggshadow">
	<a href="http://erp.clicksun.cn" target="_blank"><img src="images/gg1erp300_120.png" alt="点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。" title="点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。"/></a>
</div>
<div class="gg ggshadow">
	<a href="http://pms.clicksun.cn" target="_blank"><img src="images/gg2pms300_120.png" alt="点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。" title="点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。"/></a>
</div>
<div class="gg ggshadow">
	<a href="http://wms.clicksun.cn" target="_blank"><img src="images/gg3wms300_120.png" alt="点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。" title="点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。"/></a>
</div>
<div class="gg ggshadow">
	<a href="http://oa.clicksun.cn" target="_blank"><img src="images/gg4oa300_120.png" alt="点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。" title="点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。"/></a>
</div>
			</div>
		</td>
	</tr>
	</table>
</div>
<script type="text/javascript" src="js/prism.js"></script>
<script type="text/javascript">

Prism.hooks.add('before-sanity-check', function (env) {
  env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
  env.code = env.element.textContent;
});