html、css做一个带搜索图标的搜索框

最新推荐文章于 2025-06-02 15:24:16 发布

LL__Sunny

最新推荐文章于 2025-06-02 15:24:16 发布

阅读量1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html 以图像形式的提交按钮做搜索框 html提交按钮相对定位relative 绝对定位absolute border

本文链接：https://blog.youkuaiyun.com/LL__Sunny/article/details/103378322

html 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS将提交按钮替换为图像的方法，以增强网站搜索框的美观性。通过定义图像的URL作为src属性，可以创建一个既实用又美观的图像提交按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html、css图像代替提交按钮做个搜索框

图像形式的提交按钮与普通提交按钮在功能上基本相同，只是它用图像代替了默认的提交按钮，外形上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址！

最终效果图如下：

在这里插入图片描述

😊😊😊 具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>将提交按钮做成图片</title>
	<style>
    	.box{
    		width:220px;
    		height: 57.5px;
    		background-color: #FFF5EE;
    		position: relative;
    		margin:50px auto auto 50px;
    		border:solid silver 0.5px;
    		border-radius: 10px 10px 10px 10px ;

    	}
    	#text{
    		width:170px;
    		height: 52.5px;
    		font-size: 19px;
    		border-radius: 10px 10px 10px 10px ;
    		background-color: #FFF5EE;
    		border:solid silver 0.5px;
    		position: absolute;
    		left:0px;
    		top:0px; 

    	}
    	#search{
    		width: 58px;
    		height:58px;
    		font-size: 19px;
    		border-radius: 10px 10px 10px 10px ;
    		position: absolute;
    		right: 0px;
    		top: 0px;
    	}
    </style>
</head>

<body>
	<!-- 将按提交按钮 和文本框放在一个同盒子里 通过定位是调整它们的位置 -->
	<div class ="box">
		<input type="text" placeholder="请输入搜索内容" id="text">
		<input type="image" src="images/sou.png" id="search">
	</div>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享署名 
</body>
</html>