自制样式美观的input组件（以search输入框为例，含源码）

最新推荐文章于 2024-06-07 17:34:42 发布

gavid0124

最新推荐文章于 2024-06-07 17:34:42 发布

阅读量9.2k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/Gavid0124/article/details/48106063

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

阅读本文前，读者需要有一定的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>

搜索图片如下：