您的位置：首页 > Web前端 > CSS

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

2015-12-15 16:55 726 查看

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

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：只要你还在尝试，就不算失败。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航