前端技巧使用CSS改变搜索框的样式,美化搜索框

使用CSS改变搜索框的样式,美化搜索框

搜索框是大多数网页的重要部分,对于搜索框的样式,我们可以通过CSS来将其美化,下面我们来试试简单的做一个百度的搜索框:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
</head>
<body>
<form action="http://www.baidu.com/baidu" target="_blank" />
<input name="tn" type="hidden" value="baidu"  />
<span class="search"><input type="text" name="word" baiduSug="1" placeholder="请输入关键词"/></span>
<span class="button"><input type="submit"  value="Baidu" /></span>
</form>
</body>
</html>

浏览这个网页,我们可以看到,出现了一个简单的搜索框,效果如下图:

百度搜索框默认样式.png

这个搜索框我们未定义样式,它呈现的是默认的表单样式,这个搜索框使用起来没有问题,但是如果我们想把它做的美观一些,就需要通过CSS改变样式:

百度搜索框.png

下面我们试着将这个搜索框做成如上图这样的效果,我们通过注释的形式来介绍完成的过程:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
<style type="text/css">
input {font-size:14px;font-family:arial;border: none;background:none;}
    /*--这里设置输入框文字字体,并设置输入框背景和边框为无--*/
span.search {float:left;
    /*--将输入框放在span中并设置浮动--*/
padding:0;margin:0;
width:250px;height:36px;
    /*--设置输入框的外层元素宽度和高度--*/
background:#fafafa;color: #9e9c9c;
    /*--设置背景颜色和输入框文字颜色--*/
border: 2px solid #628DFF;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
    /*--设置边框,并将左上角和左下角设置圆角--*/
}
span.search input {
width: 240px;height:36px;
    /*--设置输入框本身的宽度和高度--*/
line-height:36px;
    /*--设置输入框行距和高度相等以便垂直居中--*/
padding:0 5px;
    /*--设置输入框本身离外层的内边距,输入文字更美观--*/
outline:none;
    /*--为了美观,将获取焦点时的轮廓线去掉--*/
}
span.button {float:left;
    /*--设置提交按钮放在span中并设置浮动--*/
padding:0;margin:0;
border: 2px solid #628DFF;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
    /*--设置边框,并将右上角和右下角设置圆角--*/
}
span.button input {
height:36px;
line-height:36px;
    /*--设置按钮本身的高度,行距和高度相等以便垂直居中--*/
padding:0 12px;
    /*--为了美观,适当设置按钮文字的左右边距--*/
background:#628DFF;color:#fff;
    /*--将提交按钮的背景颜色设置与边框颜色相同--*/
}
::-webkit-input-placeholder {color:#ccc;}
    /*--设置输入框内默认文字的颜色--*/
</style>
</head>
<body>
<form action="http://www.baidu.com/baidu" target="_blank" />
<input name="tn" type="hidden" value="baidu"  />
<span class="search"><input type="text" name="word" baiduSug="1" placeholder="请输入关键词"/></span>
<!--注意以上为文本框设置的placeholder属性,为文本框默认显示的文字-->
<span class="button"><input type="submit"  value="Baidu" /></span>
</form>
</body>
</html>

经过以上CSS的定义,搜索框已经实现了我们想要的效果。

这里顺便说一下,为什么我们这里搜索按钮使用的是【type="submit"】,而不是【type="button"】,下面简单的说说这两者的区别:

一般的,<input type="button" /> 表示一个按钮,用于通过JavaScript启动脚本。如果你不写JavaScript的话,按下这个按钮什么也不会发生。而<input type="submit" /> 相当于提交按钮,用户点击之后会自动提交表单。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cjjcqxm.cn/skill/39.html