CSS样式+背景图片实现超好看的文本框

作者：管理员

发布时间：2013/5/1 1:44:24

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=271

第一步：准备好文本框样式的左中右3张背景图片

左边背景图

中间背景图

右边背景图

第二步：编写样式代码

input {
	outline:none;
	resize:none;
}
.i {
	border:none;
	vertical-align:middle;
	font:12px/15px Arial,Helvetica,sans-serif;
	background:none;
	float:left;
	width:400px;
}
.c {
	height:26px;
	width:auto;
	background:url(img/input.gif) repeat-x 0 0;
	padding:8px 0 0 0;
	margin:0;
	float:left;
	line-height:27px;
}
.l,.r {
	width:10px;
	height:34px;
	vertical-align:middle;
	float:left;
}
.l {
	background:url(img/input-left.gif) no-repeat 0 0;
}
.r {
	background:url(img/input-right.gif) no-repeat 0 0;
}
.h {
	background-position:0 100%;
}

第三步：编写HTML代码

默认时样式：<br />
<div class="l"></div>
<div class="c">
  <input class="i" />
</div>
<div class="r"></div>
<div style="clear:both;"></div>
<br />
获得焦点时样式：<br />
<div class="l h"></div>
<div class="c h">
  <input class="i" />
</div>
<div class="r h"></div>

运行效果如下：

关键字：CSS样式 背景图片 超好看的文本框