CSS/JavaScript写一个美观的搜索框

2017-02-23 19:42:11来源:CSDN作者:AQingC_人点击

CSS/JavaScript写一个美观的搜索框



去年开始突然想学习学习网页制作...拖了大概一个月缓慢的看完html语法,用简单的CSS渲染写过几个静态页面。


这学期课少于是乎马不停蹄开始干!


学习路线为:html、CSS、JavaScript、PHP、MySQL。



模仿北邮人写一个导航网页来复习html和CSS,和学习一下JavaScript。前端完成就可以开始看PHP啦!


——————————————正文的分割线————————————————

通常html建立一个简单的文本框:

<input type="text" class="wr_text"/>


一个简单的按钮:

<input type="submit" class="sr_btn" value="Search"/>


出来的效果很简陋确实差点美观性。

不过没关系我们上CSS。


首先是文本框宽度、高度,再美观一点就设计个圆角:

width: 650px;		height: 35px;	border: 1px solid #e1e1e1;	border-radius: 0.3em;


同理,按钮的宽、高、颜色、圆角、再去掉点击时出现丑丑的蓝色外框,设置个透明度:

width: 70px;	height: 38px;	margin: 0 0 0 4px;    	border-radius: 0.3em;    	outline: none;    	font-size: 16px;	    	opacity: 0.4;	    	background-color: #eeeee;


就会有个还不错的样子了。


如果想要一种浮在页面之上的效果就用box-shadow搞定!

注意,此时选中文本框会发现光标在文本框的最左端,这样很不美观。

可以直接设置文本框的padding,或在外嵌套一层div作为边框,而去掉文本框本身的边框就可以了!

代码如下:

.input_text {	float: left;	width: 650px		height: 35px;	border: 1px solid #e1e1e1;	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18), 0 2px 4px 0 rgba(0, 0, 0, 0.15);	border-radius: 0.3em;}.input_text .wr_text {	width: 630px;	float: left;	line-height: 33px;	font-size: 16px;	color: #414141;	border-style: none;	outline-style: none;	background-color: #f4f4f4;        margin: 0 10px;}





不满足于静态的样式,想要让鼠标选中的时候有一些选中的改变,可以用下面的CSS或JavaScript来搞定:


鼠标移动到文本框区域时的变化我是用JavaScript来操作的,而按钮直接用CSS,

鼠标移动时变化的完整代码如下:

<input type="text" class="wr_text" onfocus="textFocus()" onblur="textFocus()"/>

function mouseOver() {	var inputText = document.getElementsByClassName("input_text");	inputText[0].style.cssText = 'border: 1px solid #eeeeee;' + 		'box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 4px 10px 0 rgba(0, 0, 0, 0.15);';	}function mouseOut() {	var inputText = document.getElementsByClassName("input_text");	if(document.activeElement.className != 'wr_text') {		inputText[0].style.cssText = 'border: 1px solid #e1e1e1;' +		'box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18), 0 2px 4px 0 rgba(0, 0, 0, 0.15);';	}}function textFocus() {	mouseOut();}


按钮:

.sr_btn:hover {	border-color: #0181C8;	color: #ffffff;	font-weight: bold;    background-color: #0181c8;    box-shadow: 0 2px 5px 0 #0181c8, 0 4px 15px 0 #05a1f8;}






效果如下:


鼠标移动到文本框区域或选中文本框:


鼠标移动到按钮区域:






微信扫一扫

第七城市微信公众平台