css使用背景图片制作搜索框

最新推荐文章于 2023-05-09 21:08:17 发布

啊哈前端

最新推荐文章于 2023-05-09 21:08:17 发布

阅读量3.3k

点赞数 1

分类专栏： css3 文章标签： css 背景图片搜索框

本文链接：https://blog.csdn.net/wuzhe128520/article/details/50112375

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>使用图片制作搜索框</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	.searchCon {
		width: 330px;
		height: 35px;
		background: url(images/search.jpg) no-repeat;
		position: relative;
	}

	.searchCon input.inputText{
		width: 235px;
		height: 24px;
		line-height: 24px;
		position: absolute;
		top: 4px;
		left: 5px;
		border: 0;
		border: none;
		background: none;
	}
	.searchCon input.inputButton {
		width: 73px;
		height: 33px;
		position: absolute;
		left: 257px;
		top: 1px;
		cursor: hand;
		cursor: pointer;
		/* filter: alpha(opacity: 0);
		opacity: 0;  */
		border: 0;		/*隐藏默认属性*/
		background: none;   /*隐藏默认属性*/
	}
</head>
<body>
    <div class="searchCon">
    	<input type="text" class="inputText">
    	<input type="button" class="inputButton">
    </div>
    <!--使用背景图片的搜索框思路
      使背景图片中的输入框和搜索按钮与实际输入框和搜索按钮的位置重合，在完成输入框和搜索按钮的尺寸、文本的调整后，使得一切边框皆为0、一切挡住背景图片的元素均为透明即可。
  -->  
</body>
</html>

啊哈前端

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
css使用背景图片制作搜索框

使用图片制作搜索框 .searchCon { width: 330px; height: 35px; background: url(images/search.jpg) no-repeat; position: relative; } .searchCon input.inputText{ width: 235px; height: 24px; lin
复制链接

扫一扫