【HTML+CSS】教你切图篇2-文本输入框编写

在之前的一篇文章我们提到按钮的实现,今天我们来说一下同样很常用的文本框<input>的用途,在网页中我们经常会看到文本输入框,结合上一篇的按钮实现,那么文本框和按钮的结合我们可以用来做什么呢?

1.首先我们可以想到登录框的实现,一个登录框通常包括文本输入框、登录/注册按钮、选择是否下次登录,选项框我们会在下一篇文章详细介绍,首先我们来实现一个简单的登录窗口,效果图如下:

【HTML+CSS】教你切图篇2-文本输入框编写_第1张图片

废话不多说,代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>文本框切图</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		.login{
			width: 300px;
			padding: 30px;
			border-radius: 4px;
			border:1px solid #ccc;
			font-family:"微软雅黑";
		}
		.login span{display: block;margin-bottom: 20px;}
		.login input{
			width: 220px;
			border: 1px solid #ccc;
			border-radius: 4px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 40px;
			margin-bottom: 20px;
			color: #999;
		}
		.user_mes{background: url('images/user_icon.png') 12px center no-repeat;}
		.psw_mes{background: url('images/pass_icon.png') 12px center no-repeat;}
		.login_btn{
			display: block;
			text-align: center;
			text-decoration: none;
			color: #fff;
			width: 220px;
			padding: 10px 20px;
			background-color: #63b7ff;
			border-radius: 4px;
		}
	</style>
</head>
<body>
<!-- 常见登录输入框形式 -->
<div class="login">
	<span>登录</span>
	<input class="user_mes" type="text" value="" placeholder="请输入账号" />
	<input class="psw_mes" type="password" placeholder="请输入密码" />
	<a class="login_btn" href="">登录</a>
</div>
</body>
</html>
2.文本框和代码的结合还能做什么呢?没错就是搜索框,常见的搜索框有:

相信大家看了这两篇文章后都能做出来,我们做的是另外一种,效果如下:


由于搜索图标是可点击的,所以不能将图标做成文本框的背景,通常的做法是将文本框和搜索按钮独立成两个部分,代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>表单测试</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		#search_meg{
			width: 220px;height: 28px;
			border: 1px solid #ccc;
			color: #ccc;
			border-radius: 4px 0 0 4px;
			border-right: none;
			float: left;
			outline: none;
			padding-left: 8px;
		}
		.search_btn{
			display: inline-block;
			width: 28px;
			height: 30px;
			border: 1px solid #ccc;
			border-radius: 0 4px 4px 0;
			border-left: none;
			background: url('images/search.png') no-repeat center center;
			float: left;
		}
	</style>
</head>
<body>
	<!--将搜索框分成文本框和链接的形式-->
	<input type="text" name="search" value="请输入搜索信息" id="search_meg"></input>
	<a href="#" class="search_btn"></a>
</body>
<script type="text/javascript">
	var obj=document.getElementById('search_meg');
	obj.onfocus=function(){
		if (obj['value']='请输入搜索信息') {
			obj['value']='';
			obj.style['color']='#333';
		}
	}
	obj.onblur=function(){
		if (this['value']==''|| this['value']=='请输入搜索信息') {
			this['value']='请输入搜索信息';
			this.style['color']='#ccc';
		}
	}
</script>
</html>
在这里文本框提示文字没有设置placeholder属性,因为它在IE10以下都不兼容,我们可以用value来代替,但是实现点击文本框提示文字消失的效果就得用JS来实现了。这种JS实现的方法也不是万能的,当密码框使用value属性时,默认会变成星星。所以有些人的做法是将提示文字用label表示,文本框获得焦点后label消失,在这里就不多说啦。


Author:事始

Sign:只要你还在尝试,就不算失败。


你可能感兴趣的:(html,css,IE)