自制样式美观的input组件(以search输入框为例,含源码)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Gavid0124/article/details/48106063

阅读本文前,读者需要有一定的html + css的技术功底。

不说废话,先附上search输入框的成果截图:


分析:

1. 组件分解:分解为如下几个部分:

1)外层:增加一个容器,如div

2)内层:

一个input输入框

一个按钮

2. 设置样式:

1)容器样式

增加border属性,样式代码:

border: solid 1px #ddd;

增加border圆角边框,样式代码:

border-radius: 5px

2)输入框样式

去除border样式:

border: none

去除轮廓样式:

outline: 0 none;

3)按钮样式

同样,去除border样式

border: none

给按钮增加搜索背景图片样式:

background-image: url("images/ico_sear.gif");
background-repeat: no-repeat;
 

设置display样式为:inline


这样分解完,相信大家就很容易理解了。

并附上完整实现代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 自制search搜索框组件 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
	.searchBlock{
		width: 110px;
		border:solid 1px #ddd;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-khtml-border-radius: 5px;
	}
	
	.searchBlock span{
		float: left;
	}
	.searchText{
		border: none;
		width: 80px;
		margin: 2px 5px;
		outline: 0 none;
	}
	.searchBtn{
		border: none;
		width: 16px;
		height: 16px;
		cursor: pointer;
		background-image: url("images/ico_sear.gif");
		background-repeat: no-repeat;
		display: inline;
		margin: 2px 0px;
	}
  </style>
 </head>

 <body>
  <div class="searchBlock">
	<span>
		<input type="text" id="search" name="search" class="searchText">
	</span>
	
	<input type="button" class="searchBtn">
  </div>
 </body>
</html>
搜索图片如下:



通过这样的一个实例,我们也可以做出很多类似的组件了。


展开阅读全文

没有更多推荐了,返回首页